Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Text

Title bar

The title bar provides a headline for the content below with optional supporting actions.

Status

Supported

Introduced

v0.19.0

View codeView StorybookView Design

Interactive demo

This demo lets you preview the title bar component, its variations, and configuration options.

Heading

Link
Render heading as
Action item
1import React from 'react';
2import { TitleBar } from 'newskit';
3
4export default () => (
5  <TitleBar headingAs="h3">Heading</TitleBar>
6);
7

Anatomy

The title bar contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

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:

Focus order
OrderElementRole
Keyboard interactions
CommandDescription

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

Title bar

The title bar has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?