Headings
‹ BackWhy 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:
- Name - This is the name of the class. eg if the name is "one", then the class will be "heading-one"
- Font size
- Line-height (optional)
- 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; }