A header block used on category pages featuring the title, a summary and an illustration.
About this component
The category header has:
- a title
- content that describes what’s on the page
- an optional image
If an image is used within a category header, the image will stack below the text content of a category header on a mobile device. The image will also take up the full screen width.
The image will appear on the right-hand side of a category header on a desktop.
Other versions of this component
Category headers may use a coloured background instead of white. If you choose to do this you must ensure that all text on the category header still meets colour contrast requirements.
The coloured background should be applied to an element that wraps the category header. If using a dark colour, such as in this example, you should add a class of
ds_reversed to the wrapping element. This will make the text content display in white.
Note also that in the example above the breadcrumbs are also included in the coloured area and that the
ds_reversed class has also altered the colour of its links.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: firstname.lastname@example.org