Headline

The Headline component will render an html h1-6 tag. Please reference the w3 recommendations for headings to ensure your headings provide an accessible experience for screen reader users.

Prefer to use headlines starting from level one and not skip levels. Use combination of as and size property to keep the semantics while following the design.

  • Use different headlines and paragraphs to structure your content hierarchically
  • Avoid using headline lengths, breaking more than two times (three times on mobile)
  • Avoid using sizes outside the given range
  • Recommended width of headline is between 500px and 700px

Properties

NameTypeDefault
as

"h1" | "h2" | "h3" | "h4" | "h5" | "h6"

HTML-tag to use
h1
size

"xxl" | "xl" | "l" | "m" | "s" | "xs"

if "size" prop is not set , the size is determined based on "as" prop
inverted

boolean

if "true" - sets bright color to the font

The Headline supports margin and textAlign styled-system props.

Default headlines

headline h1

headline h2

headline h3

headline h4

headline h5
headline h6

headline h1 inverted

headline h2 inverted

headline h3 inverted

headline h4 inverted

headline h5 inverted
headline h6 inverted

Responsive size

The size property supports responsive values. Pass an array or an object and the design system use corresponding values for different viewport sizes.

For example, the following snippet uses s size for mobile and xl size bigger screens:

<Headline as="h2" size={{_: 's', medium: 'xl'}}>Small on mobile, big on bigger screens</Headline>

Playground