Page titles

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

Components

Component Description
Page title Title of the page. Refer to the content section of Stacks for things like word choice, naming, and capitalization.
Description Optional Additional context for content and actions on the page.
Actions Optional Free-form area to include buttons, filters, or other HTML content.
Breadcrumbs Optional Breadcrumbs can be included to provide context for the currently-viewed page.

Admin sections

These components should be used in the admin sections of our private Q&A products.

Base Styles

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">
    <div class="s-page-title--text">
        <h1>Page title</h1>
    </div>
</div>

Page title

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>Page title</h1>
        <p class="s-page-title--description"></p>
    </div>
</div>

Page title

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

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 grid of custom filters and text.

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

Page title

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

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 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="breadcrumb"></nav>
        <h1>Page title</h1>
        <p class="s-page-title--description"></p>
    </div>
</div>

Page title

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