Contact Cards: 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: contact-cards-white-center, contact-cards-light-slate-center, contact-cards-light-blue-center, contact-cards-white-left, contact-cards-light-slate-left, contact-cards-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 card. Copy the whole row onto your page, then change the text and links.

Cards

• Each card is: Heading (H3, the office name), a Text with the address, and a Text with one paragraph per contact link. The lines between them come from the theme.
• The icons are chosen by the link: a phone link (tel:08000828001) gets the phone icon and is shown in bold; an email link (mailto:[email protected]) gets the envelope. Link the phone number and email address with the Text editor’s Insert Link; leave out a line you don’t need.
• Use 4, 3 or 2 columns in the Column Group. From 1100 px the cards share the row as set; from 768 px they go two per row (rows of three stay three across from 991 px); on phones every card stacks.
• For more cards, add a second Column Group under the first: each Column Group is one row of cards, 30 px apart. Leave a Column empty to keep the card widths when the last row is not full.
• The white card, border, shadow and orange icons are the same on every background.

Contact Cards Grid

• The last three rows on this page are the Figma “Contact Cards Grid”: the cards on their own in 2, 3 and 4 columns, for pages that already have a heading above.

No images are needed. The text on this page is the Figma placeholder copy.