Category header

A header block used on category pages featuring the title, a summary and an illustration.

Open this example in a new window

Sample HTML

<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.svg" alt="" />
        </div>
    </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.

Open this example in a new window

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

Back to top