Page titles

Page titles create consistency in the layout of similar pages, specifically the placement and appearance of titles, descriptions, actions, and breadcrumbs.

Classes

Section titled Classes

Class	Parent	Description
`.s-page-title`	N/A	Base class for the page title component.
`.s-page-title--actions`	`.s-page-title`	Contains the page actions.
`.s-page-title--text`	`.s-page-title`	Contains the page title and description.
`.s-page-title--description`	`.s-page-title--text`	Contains the page description.
`.s-page-title--header`	`.s-page-title--text`	Contains the page title.

Examples

Section titled Examples

Base example

Section titled Base example

The base style for pages that don’t need further description beyond the page title and don’t have any actions for filters.

<div class="s-page-title">
    <h1 class="s-page-title--header">Page title</h1>
</div>

Title with description

Section titled Title with description

A summary of a page’s content. Helpful for large pages with multiple actions.

<div class="s-page-title">
    <div class="s-page-title--text">
        <h1 class="s-page-title--header">Page title</h1>
        <p class="s-page-title--description">…</p>
    </div>
</div>

Optional description de Finibus Bonorum et Malorum with an optional link.

Title with actions

Section titled Title with actions

When a page title includes actions, they are located at the far end of the component. This area is free-form, so we can include any markups we'd like, from single button to a d-flex of custom filters and text.

<div class="s-page-title">
    <div class="s-page-title--text">
        <h1 class="s-page-title--header">Page title</h1>
        <p class="s-page-title--description">…</p>
    </div>
    <div class="s-page-title--actions">…</div>
</div>

Optional description de Finibus Bonorum et Malorum with an optional link.

Title with breadcrumbs

Section titled Title with breadcrumbs

Breadcrumbs are used to provide context for the currently-viewed page and reduce the number of actions a website visitor needs to take in order to get to a higher-level page. Breadcrumbs should not be used for single-level sections that have no logical grouping.

<div class="s-page-title">
    <div class="s-page-title--text">
        <nav class="s-breadcrumbs" aria-label="…">…</nav>
        <h1 class="s-page-title--header">Page title</h1>
        <p class="s-page-title--description">…</p>
    </div>
</div>

Optional description de Finibus Bonorum et Malorum with an optional link.