<h1 class="flix-h1">Heading 1</h1>
<h2 class="flix-h2">Heading 2</h2>
<h3 class="flix-h3">Heading 3</h3>
<h4 class="flix-h4">Heading 4</h4>
<h1 class="flix-h1 flix-h1--section-header">Section Heading 1</h1>
<h2 class="flix-h2 flix-h2--section-header">Section Heading 2</h2>
<h3 class="flix-h3 flix-h3--section-header">Section Heading 3</h3>
<h4 class="flix-h4 flix-h4--section-header">Section Heading 4</h4>
<h2 class="flix-h2 flix-h2--space-flush">Headline with no padding</h2>
<h3 class="flix-h3 flix-h3--section-header">And a sub heading</h3>

Following modifier classes are available:

• --section-header removes the top padding, useful for the headers on top of your page or section headline.
• --space-flush removes all the vertical padding. Use if you need a subheading underneath or you want you heading to stick closer to some element on your page.

Visual Hierarchy versus Semantic Hierarchy

It is very convenient that we kept the heading visual definitions separate from their actually semantic value, since your content structure and design may (and very often do) not agreed.

Keeping a semantic heading structure is crucial for many assistive technologies but even more so to screen readers and accessibility. So just because your heading "looks" like a .flix-h2 does mean it has to be a <h2>. So you can mix and match the correct <h#> tag with a desired .flix-h# class name in order to preserve a semantic hierarchy.

• Correct usage of Heading information can be used by user agents to construct a table of contents for a document automatically.
• Avoid using heading elements (<h#>) to resize text. Instead, use the .flix-h# class name on an adequate element.
• Avoid skipping heading levels: always start from <h1>, followed by <h2> and so on.
• Use only one <h1> per page or view. It should concisely describe the overall purpose of the content.

With that being said, even though we offer only 4 heading class helpers you are free (and we strongly encourage you) to use all 6 heading tags available, as long as it makes sense for your project.

<h2 class="flix-h1">This is an H2 that has flix-h1 styles</h2>
<h3 class="flix-h2">This is an H3 that has flix-h2 styles</h3>