Blurbs: 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: blurbs-white-center, blurbs-white-left, blurbs-light-slate-center, blurbs-light-slate-left, blurbs-light-blue-center, blurbs-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 (Image icon, subtitle Text, Heading, Text, one Button). Copy the whole row onto your page, then change the text, links and icons.

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).
• The card’s white panel, border, rounded corners, shadow, orange icon disc and small blue button come from the theme and stay the same on every background. Delete the card’s subtitle Text if it is not needed.
• For more cards than one row, 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.
• Buttons under the intro work as on Hub Links: add a Buttons element inside the intro Container (Primary, Secondary or Link).

Blurb Grid

• The last three rows on this page are the Figma “Blurb 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 cards go two per row while rows of three or two stay across; on phones every card stacks.

What to ask your designer for

• Card icon: PNG with a transparent background, white line artwork, exactly 400 × 400 px, under 20 KB. It is shown at 50 px on an orange disc. Name it blurb-icon-<name>-400.png. Set it as the card’s Image; no mobile version is needed.
• Reference file in media/wysiwyg/components/blurbs/: blurb-icon-24-7-400.png (the icon used in the Figma). The text on this page is the Figma placeholder copy.