Team Listing

List out team members with their name, title, social links, and profile image.

View a live demo of this module.

Content

  • Include a heading with eyebrow, heading, sub-heading, and text
  • Add as many team members as needed
  • For each team member ,include image, name, title, and socials
    • Twitter, Pinterest, Instagram, YouTube, Blog, and email are available out-of-the-box, but a custom social can be added by choosing "other" and selecting a FontAwesome icon
    • Include an aria label on socials for screen reader accessibility
  • Include a call to action button beneath the listing
  • Set how many members to list per row
  • Change the spacing between the rows and columns
  • Change the heading placement (left of listing, right of listing, above listing)
  • Change the placement of socials (above text, right of text, below text, or left of text)

Styles

  • Set Dark Mode on heading and team member text separately
  • Set a max width on the heading
  • Change text alignment of heading and team member text separately
  • Add border radius on team member boxes
  • Change aspect-ratio of team member images
  • Change background color of team member boxes
  • Change height and color of social icons
  • Enclose social icons in a colored box (change height, width, border, radius, and color of box)

 

team-listing