Category header
This component has been deprecated. Use the 'feature header' component instead.
A header block used on category pages featuring the title, a summary and an illustration.
Sample HTML
<div class="ds_category-header">
<header class="ds_category-header__header">
<h1 class="ds_category-header__title">Design standards</h1>
<div class="ds_category-header__summary">
<p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
</div>
</header>
<div class="ds_category-header__media-container">
<img class="ds_category-header__media" src="/assets/images/examples/category-header-design-standards.svg" alt="" />
</div>
</div>Developer notes
Configuration options
The following property can be overridden
$category-header__title-color - colour of the H1 element
Your value for this should be included before you include the SCSS file.
$category-header__title-color: red;
@import '/path/to/components/category-header/category-header';
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.
Sample HTML
<div class="placeholder-header-wrapper ds_reversed">
<div class="ds_wrapper">
<nav aria-label="Breadcrumb">
<ol class="ds_breadcrumbs">
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Home
</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Justice and the law
</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">
Your rights and the law
</a>
</li>
<li class="ds_breadcrumbs__item" aria-current="page">
Data sharing of personal information
</li>
</ol>
</nav>
</div>
<div class="ds_wrapper">
<div class="ds_category-header">
<header class="ds_category-header__header">
<h1 class="ds_category-header__title">Design standards</h1>
<div class="ds_category-header__summary">
<p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
</div>
</header>
<div class="ds_category-header__media-container">
<img class="ds_category-header__media" src="/assets/images/examples/category-header-design-standards--reversed.svg" alt="" />
</div>
</div>
</div>
</div>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: designsystem@gov.scot