Skip to content
Mesh
5.3.1

Heading

A standard heading component. Headings have no margins by default and can be sized independently of the underlying html element.

Installation

bash
npm install @nib-components/heading

Usage

jsx
import Heading from '@nib-components/heading';

Interactive demo

Heading 1

Heading 2

Heading 3

Dynamic heading sizing

jsx

Props

PropTypeDefaultDescription
size (required)number or objectThe heading size. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 1, 2, 3, 4, 5 or 6.
componentstring or ComponentThe heading component. What DOM element should your heading be. Optional if size is a number, required if size is an object.
colorstringcurrentColorThe heading color. Use one of the color selectors from Theme.

Considerations

The Heading component should be used for all heading elements and headings should be sentence case only.

There should only ever be one h1 used on a page.

Be sure not to exceed 70 characters and avoid using hyphens (-) to line wrap text.

Margins

Headings have no margins by default. If you wish to add margins please do so using the approved spacing package styled-components-spacing.

Heading levels

There are times when you may want to include a certain h level, but for the underlying DOM element to have a specific size. For this, our Heading component supports mixing styling and heading levels through the component prop.

This is especially important for ensuring that pages follow a logical, semantic heading hierarchy.

Responsive heading size is possible by supplying an object of breakpoints to the size prop, and specifying the underlying DOM element via the component prop.

If longer text is required, consider using the Copy component instead.