Headline component

Headlines allow users to quickly scan through a page to find the information they are looking for.

In order to be accessible, FOLIO uses 6 levels of headline arranged in a hierarchical fashion: H1, H2, H3, H4, H5, H6 The universal header uses H1, the pane header uses H2 and the accordion title uses H3. Within accordions, only H4 to H6 shall be found. Outside, developers can use H3 to H6.

Headlines use Source Sans Pro Semibold only. Depending on the need, the style can be adjusted

Font size: Headlines can be small (12px), medium (14px) or large (18px).

Opacity: Headlines can be faded using a 62% opacity. Margin: If needed, the margin can be changed.