Sections

Page titles

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

Components

Section titled 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

Section titled Admin sections

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

Base Styles

Section titled 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">
    <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 grid 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="breadcrumb">…</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.

Edit on GitHub