Support the page structure
To showcase a product capability or service benefit
Templates
Feature
Feature showcase sections pairing copy with images or components in flexible column ratios.
Keep the layout consistent
To pair an image or component with descriptive copy in a marketing page
Use it intentionally
For dense data displays — use stat cards or a table
4 + 8 · image left
Image in 4 cols, content in 8 cols, image first.
4 + 8 · image right
Image in 4 cols, content in 8 cols, image second.
6 + 6 · image left
Balanced 50/50 split, image first.
6 + 6 · image right
Balanced 50/50 split, image second.
6 + 6 · component left
50/50 split with an SGDS component (not an image) on the left.
6 + 6 · component right
50/50 split with an SGDS component on the right.
8 + 4 · image left
Image in 8 cols (dominant), content in 4 cols, image first.
8 + 4 · image right
Image in 8 cols (dominant), content in 4 cols, image second.
Cards below
Section header with feature cards arranged in a row below.
No image · center
Headline + description + actions, no image, centered.
No image · left
Headline + description + actions, no image, left-aligned.
When to use
- To showcase a product capability or service benefit
- To pair an image or component with descriptive copy in a marketing page
- When you need flexible content + visual ratios to balance density and emphasis
When not to use
- For dense data displays — use stat cards or a table
- When you need consistent uniform tiles — use the cards block
Keyboard support
Use the SGDS components inside the feature 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/feature