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
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
"h1" | "h2" | "h3" | "h4" | "h5" | "h6"
"xxl" | "xl" | "l" | "m" | "s" | "xs"if "size" prop is not set , the size is determined based on "as" prop
headline h1 inverted
headline h2 inverted
headline h3 inverted
headline h4 inverted
headline h5 inverted
headline h6 inverted
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: