Headings

‹ Back

Why doesn't Ornament style headings by default?

Not all heading tags should dictate their styling. Sometimes semantically you need a h6 that looks like a h2. This can be achieved by using heading classes.

Heading classes

There are several out-of-the-box heading classes:

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
<h1 class="heading-one">Heading one</h1>
<h2 class="heading-two">Heading two</h2>
<h3 class="heading-three">Heading three</h3>
<h4 class="heading-four">Heading four</h4>
<h5 class="heading-five">Heading five</h5>
<h6 class="heading-six">Heading six</h6>

SASS Mixins

All heading definitions are in the typography partial.

Heading definitions

There are two sass lists that define the desktop heading sizes and mobile heading sizes.

The headings will switch between these sizes based on the $breakpoint-typography setting.

$headings-regular: (
  ("one",   3rem),
  ("two",   2.25rem),
  ("three", 2rem),
  ("four",  1.75rem),
  ("five",  1.5rem),
  ("six",   1.25rem)
);

$headings-small: (
  ("one",   1.75rem),
  ("two",   1.5rem),
  ("three", 1.375rem),
  ("four",  1.25rem),
  ("five",  1.125rem),
  ("six",   1rem)
);

Both sets of lists take the same arguments:

  1. Name - This is the name of the class. eg if the name is "one", then the class will be "heading-one"
  2. Font size
  3. Line-height (optional)
  4. Font-face (optional)

A simple implementation would be ("section", 3rem)

A more complex one would be ("secondary", 1.5rem, 1.2, $bold-italic-font)

@heading

@heading is a convenient mixin for applying heading styles to a selector. The only argument it takes is the name of the heading:

.section-heading {
  @include heading("two");
  text-decoration: underline;
}