<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>

Section header

The --section-header modifier removes the top padding, useful for the headers on top of your page or section headline.

<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>

Space flushing

The --space-flush modifier removes all the vertical padding. Use it if you need a subheading underneath or you want your heading to stick closer to some element on your page.

<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>

Respect the semantic headings 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>