Paste

Design System

Heading

Twilio's Heading component

Status
beta
Version
1.0.5
Sources
Storybook
Install
yarn add @twilio-paste/heading

Guidelines#

Headings are words or phrases that are intended to introduce sections of content. Headings are often used for page headings, as well as content subsections within the page.

About Heading#

Headings should allow users to easily distinguish content sections on the page.

  • Headings can have multiple levels of depth to help organize content
  • Heading types provide specific styles to the font-size, font-weight, and line-height of the text to create hierarchy that allow users to easily scan pages and content
  • Headings should be used with intention that maintains a coherent document outline
  • Don’t use heading tags to resize text. Instead use the <Text> utility
  • Don’t skip headline levels. Always start with <h1>, <h2>, and so on
  • There can only be one <h1> tag per page.

Accessibility#

It is important to not skip one or more heading levels as it is common for screen readers to build an outline of the page and assist users as they navigate a page. Skipping a heading level could cause confusion as the user navigating the page may not know why a heading is missing.

  • Heading text should meet AA requirements (4.5:1) for color contrast from itself and the background color
  • Headings should be used thoughtfully, with clear hierarchies for content and subsections

Examples#

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Heading as h2 with heading10 variant

Heading One

Heading as h2 with heading20 variant

Heading Two

Heading as h2 with heading30 variant

Heading Three

Heading as h2 with heading40 variant

Heading Four

Heading as h2 with heading50 variant

Heading Five

Heading as h2 with heading60 variant

Heading Six

Composition Notes#

When to use Heading#

Headings should be used for page headings or content subsections. Headings are broken into six levels, where h1 is the highest level and h6 is the lowest. Avoid skipping heading levels. Use the next lowest heading level to maintain a coherent document outline.

Do

Use headings for page headings to specific sections of content.

Don't

Don’t use headings for pure stylistic purposes.

Do

Use headings in order, so your content reads like an outline.

Don't

Don’t use headings out of order.


Usage Guide#

API#

Installation#

yarn add @twilio-paste/heading

Usage#

import {Heading} from '@twilio-paste/heading';
<Heading as="h2" variant="heading20">
Heading Two
</Heading>

Props#

PropTypeDescriptionDefault
asasTags'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'label', 'span'null
variant?headingVariants'heading10', 'heading20', 'heading30', 'heading40', 'heading50', 'heading60''heading20'

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.5 (2019-12-05)

Note: Version bump only for package @twilio-paste/heading

1.0.4 (2019-11-21)

Bug Fixes#

1.0.3 (2019-11-20)

Bug Fixes#

  • remap console semibold to medium font weight (#195) (c01f6b3)

1.0.2 (2019-11-18)

Note: Version bump only for package @twilio-paste/heading

1.0.1 (2019-11-12)

Note: Version bump only for package @twilio-paste/heading

1.0.0 (2019-11-11)

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)
  • typography: heading component (#149) (4e033e6)
  • enable theme switching on the docsite (#124) (df797e5)

0.4.1 (2019-10-31)

Note: Version bump only for package @twilio-paste/heading

0.4.0 (2019-10-29)

Features#

0.3.4 (2019-09-16)

Note: Version bump only for package @twilio-paste/heading

0.3.3 (2019-08-15)#

Bug Fixes#