Text
Title bar
The title bar provides a headline for the content below with optional supporting actions.
Interactive demo
This demo lets you preview the title bar component, its variations, and configuration options.
Heading
Anatomy
The title bar contains two required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
Options
The title bar has options for different use cases:
Actions
An action, such as a link, can be added to the title bar. They are positioned to the container's right, aligned to the title.
Width
The container takes the entire width of the specified grid area, for example, 12 columns, six columns etc.
Border
A border can be applied to the container to provide visual separation from the preceding or the following content.
Heading tag
By default, the title is set to h3. The tag can be set to 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'.
Actions
An action, such as a link, can be added to the title bar. They are positioned to the container's right, aligned to the title.
Width
The container takes the entire width of the specified grid area, for example, 12 columns, six columns etc.
Border
A border can be applied to the container to provide visual separation from the preceding or the following content.
Heading tag
By default, the title is set to h3. The tag can be set to 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'.
Behaviours
The following guidance describes how the title bar behaves.
Actions are hidden at the xs breakpoint.
The action item is default hidden on an extra small (xs) breakpoint (below 480px). This allows the action to be placed at the bottom of the following content for an improved user experience.
Actions are hidden at the xs breakpoint.
The action item is default hidden on an extra small (xs) breakpoint (below 480px). This allows the action to be placed at the bottom of the following content for an improved user experience.
Usage
The following guidance describes how and when to use the title bar component appropriately.
Do use a title bar to create sections of content.
Use a title bar to create content sections. Add a link to additional content if available.
Accessibility considerations
The title bar has the following accessibility considerations:
| Order | Element | Role |
|---|
| Command | Description |
|---|
SEO
Title text should be set at the correct semantic level (e.g. <h1> to <h6> ) to enable crawlers to better index the page.
API
The title bar has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|