Feature header
About this component
A feature header has:
- a title
- optional content that describes what’s on the page
- an optional image
If an image is used on a feature header header, the image will stack below the text content of a category header on a mobile device and take up the full screen width.
The image will appear on the right-hand side of a feature header on a desktop, taking up half of the available width of the header.
Other versions of this component
Coloured background
Feature headers may use a coloured background instead of white, with light grey being the default. If you use a coloured background you must ensure that all text on the feature header still meets colour contrast requirements.
Wide text
You can use the wide text version of the component to make the text take two thirds of the available space and make the image take up one third of the space.
This version can be combined with the coloured background version.
Live example
Benefits and grants (mygov.scot)
First Minister (gov.scot)
Arts, culture and sport (gov.scot)
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback