Page titles

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

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.

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

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>

Page title

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>

Page title

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

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>

Page title

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

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>

Page title

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