Page title block
Page title block gives users context of the current page and options for actions related to the page-level content. It creates visual consistency across the pages to support the user's mental model while they traverse through the site.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files
Functional grouping: Structure and layout
Demo
Configure: select the dropdowns below to display the variety of options that a page title block supports.
Usability best practices
The title element also presents as the H1 element for the page (important for accessibility and SEO). Use this to represent page title in a consistent and familiar format.
The page title block includes:
- required elements:
- page title (including optional contextual and subtitle elements)
- distinct background
- page title (including optional contextual and subtitle elements)
- optional/conditional elements:
- contextual title or link
- subtitle
Special consideration when placing alongside:
Do
Place below primary navigation.
Don't
Do not combine with other patterns that present an H1 elements such as H1 heading, hero banner, etc.