Headings

Base Headings

The class structure follows the structure discussed by Harry Roberts in his article practical font sizing in CSS on CSS Wizardry.

The fox

The fox

The fox

The fox

The fox
The fox
<h1 class="alpha">The fox</h1>
<h2 class="beta">The fox</h2>
<h3 class="gamma">The fox</h3>
<h4 class="delta">The fox</h4>
<h5 class="epsilon">The fox</h5>
<h6 class="zeta">The fox</h6>

Utilities

Style

Use the .is-uppercase class to enforce a heading to be in capitals.

The fox

<h1 class="is-uppercase">The fox</h1>

Spacing

Using .drop class applies only half the regular bottom bottom.

The fox

The fox

The fox

<h1 class="drop">The fox</h1>
<h1>The fox</h1>
<h1>The fox</h1>
Back
Link to single component view