Headings

Kelp includes styling for h1 through h6 headings.

The h1 headings get slightly bigger on wider viewports. The h2 headings have a generous margin-block-start to provide better spacing in long-form writing.

h1. Heading 1

h2. Heading 2 #

h3. Heading 3 #

h4. Heading 4 #

h5. Heading 5 #

h6. Heading 6 #

<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

Semantic Heading Classes #

All headings have a corresponding class that can be used to to adjust the size of headings while using the correct semantic heading level.

For example, if a heading should be an h2 element semantically, but you would like it to be styled as an h4 element, you can apply the .h4 class to the h2 element.

This is an h2 heading styled like an h4 #

<h2 class="h4">This is an h2 heading styled like an h4</h2>