Support the page structure
For long-form content like blog posts, news articles, success stories, or case studies
Templates
Blog
A long-form content layout for blog posts, news articles, success stories, and case studies.
Keep the layout consistent
When the page needs a clear hierarchy of headline, body sections, and supporting stats
Use it intentionally
For task-driven pages — use a form, dashboard, or management template instead
Success story
Breadcrumb, article header, body sections with sub-headings, results stats, and a closing CTA.
When to use
- For long-form content like blog posts, news articles, success stories, or case studies
- When the page needs a clear hierarchy of headline, body sections, and supporting stats
- For editorial pages anchored by a breadcrumb and overline tag
When not to use
- For task-driven pages — use a form, dashboard, or management template instead
- For brand or product introductions — use the about us or landing template
Keyboard support
Use the SGDS components inside the blog pattern so keyboard behaviour stays predictable.
Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.
Tab order
- Move focus into the pattern.
- Navigate through interactive elements in visual order.
- Confirm any revealed or supporting content remains reachable.
- Continue to the next interactive element on the page.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/templates/blog