Team: how to use

Each section is a full-bleed Row with one variant class in Advanced › CSS Classes. The class is the Figma background plus alignment: team-white-center, team-white-left, team-light-slate-center, team-light-slate-left, team-light-blue-center, team-light-blue-left. The Row holds a Container with the intro (subtitle Text, Heading, intro Text); then a Column Group where each column is one person (Image, Heading for the name, Text for the role, Buttons). Copy the whole row onto your page, then change the people.

Cards

• Use 4, 3 or 2 columns in the Column Group; the cards share the row evenly from 1100 px, sit two per row on tablets (991–1099 px) and stack on phones (up to 990 px). For more people than one row, add a second Column Group; leave a Column empty to keep the card widths when the last row is not full.
• Buttons: the icons come from the link you type. A button whose link starts with mailto: shows the envelope, tel: the phone, and a link to linkedin.com the LinkedIn mark — icon only, the label is read by screen readers. Any other button (for example “Bio” linking to the person’s page) stays a text button and sits at the right. Delete the buttons a person does not have.
• The white panel, border, rounded corners, shadow and blue buttons come from the theme and stay the same on every background.

Team Grid

• The last three rows on this page are the Figma “Team Grid”: the cards on their own in 2, 3 (two rows) and 4 columns. It is the same Row and class with the intro Container removed, for pages that already have a heading above. On tablets (991–1099 px) rows of four go two per row while rows of three or two stay across; on phones every card stacks.

What to ask your designer for

• Portrait: JPG, square, 800 × 800 px, sRGB, under 150 KB, the person centred with room above the head. It fills the top of the card and is cropped from the centre if it is not square. Name it team-<firstname-lastname>-800x800.jpg. Set it as the card’s Image; no mobile version is needed.
• Reference file in media/wysiwyg/components/team/: team-james-hargreaves-546x601.png, the Figma photo (not square, so the card crops it). The text on this page is the Figma copy.