Title Bar

Overview

The title bar provides context and actions related to a particular section of content that follows below on the screen.

Props

Title bar has a number of props to facilitate a variety of uses:

childrenstring

The content of the title is passed as the child of the component.

headingAs'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' = h3

The heading tag used for the title. It should be one of the following strings: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'.

actionItemReact.ComponentType

An action item, most commonly a button or a link, related to the title. The actionItem is hidden for extra small viewports (less than 480px).

overridesobject

If provided, overrides the respective presets for the component and provided elements.

stylePresetMQ<string>

If provided, this overrides the style preset applied to the TitleBar.

spaceInsetMQ<string>

If provided, this overrides the padding preset applied to the TitleBar.

headingobject

typographyPresetMQ<string>

If provided, this overrides the typography preset applied to the TitleBar heading.

stylePresetMQ<string>

If provided, this overrides the typography preset applied to the TitleBar heading.

Refer to the defaults below for the object structure:

1{
2  stylePreset: "titleBar",
3  spaceInset: {
4    xs: "spaceInsetSquish030",
5    lg: "spaceInsetSquish040"
6  },
7  heading: {
8    typographyPreset: {
9      xs: "editorialHeadline050",
10      md: "editorialHeadline070",
11      lg: "editorialHeadline080"
12    }
13  }
14}

For more information about how to apply overrides to a component please refer to the Override default preset page.

Playground

Title content

1import React from 'react';
2import { TitleBar } from 'newskit';
3
4export default () => (
5  <TitleBar headingAs="h3">Title content</TitleBar>
6);
7

For more information on overriding component defaults, see the docs here.

Anatomy

Title
Action items (optional)

Container

The container takes up the full width of the grid area that's specified for example 12 column, 6 column etc.

A border is applied at the bottom.

Title

The title should provide context for the content that sits below the title bar.

Action Items

Action items can include a button or a link. They are positioned to the right of the container and they vertically align to the position of the title. If you are using one of our components you can style the Button or the Link as you like from their overrides. We suggest you to use the style preset buttonSolidPrimary and linkStandalone respectively for a Button and a Link action.

Behaviour

Action hidden at smaller breakpoints

By default the action item is hidden on extra small breakpoint (xs). This is to allow the action to then be placed at the bottom of mobile list for a better UX.

Accessibility

Your title should be 3:1 colour ratio against a the background colour to be AA WCAG compliant.