Blurbs No Card: how to use

The same layout as Blurbs, but each item sits straight on the background with no white card. Each section is a full-bleed Row with one variant class in Advanced › CSS Classes: blurbs-no-card-white-center, blurbs-no-card-white-left, blurbs-no-card-light-slate-center, blurbs-no-card-light-slate-left, blurbs-no-card-light-blue-center, blurbs-no-card-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 item (Image icon, subtitle Text, Heading, Text, one Button). Copy the whole row onto your page, then change the text, links and icons.

Items

• Use 4, 3 or 2 columns in the Column Group; the items share the row evenly from 1100 px, rows of four go two per row on tablets (991–1099 px), and every item stacks on phones (up to 990 px).
• Each item’s button is pinned to the bottom, so the buttons line up across the row even when the text lengths differ.
• Button colour: choose it with the button’s Button Type. Primary = orange on every background; Secondary = solid blue on white and light slate, white outline on light blue (used on this page); Link = white with a blue outline. Use the same type across a row.
• The icon and the subtitle are optional: delete the Image or the subtitle Text if not needed. The item text stays left-aligned in the Center variants; only the intro is centred.
• For more items than one row, add a second Column Group under the first (30 px apart). Leave a Column empty to keep the widths when the last row is not full.
• Buttons under the intro: add a Buttons element inside the intro Container (Primary, Secondary or Link).
• The last three rows are the items on their own (no intro), in 2, 3 (two rows) and 4 columns.

What to ask your designer for

• 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 item’s Image; no mobile version is needed.
• Reference file in media/wysiwyg/components/blurbs-no-card/: blurb-icon-24-7-400.png. The text on this page is the Figma Blurbs placeholder copy.