Recent articles: 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: recent-articles-white-center, recent-articles-white-left, recent-articles-light-slate-center, recent-articles-light-slate-left, recent-articles-light-blue-center, recent-articles-light-blue-left. The Row holds a Container with the intro (subtitle Text, Heading, intro Text) and a “View All” Buttons element; then a Column Group where each column is one article card; then a final Buttons element with the footer “View All” link.

Article cards

• Each card column holds, in order: Image, a Text with the date, the Heading, a Text with the summary, a Text with class article-tags containing a bulleted list (each list item becomes a tag), and a Buttons element with one “Read More” button.
• Figma shows three cards; the columns keep their count from 991 px up and stack on phones (up to 990 px). These are static placeholder cards: pulling live articles in automatically is a separate piece of work.

What to ask your designer for

• Card photo: JPG, exactly 800 × 426 px (396:211, landscape), sRGB, under 100 KB. Name it <name>-800x426.jpg.
• Reference files in media/wysiwyg/components/recentarticles/: article-dry-air-cooler-800x426.jpg, article-kew-gardens-800x426.jpg, article-anaerobic-digestion-800x426.jpg.