Headings
I am a span which looks like a heading. Check out my modifier!
In addition to <h1>, <h2>, etc.. tags, any element can be made to look like a heading. These are applied to any
element using the .headingXXL, .headingXL, ... etc classes. Each class extends '%heading' and includes a fontsize.
into a single class for brevity.
Compared to heading tags additional heading sizes are available: The .headingXL and .headingM classes are only
available through a heading-class, and are not linked to any heading-tag.
Markup
<span class="{{modifier_class}}">I am a span which looks like a heading. Check out my modifier!</span>Modifiers
I am a span which looks like a heading. Check out my modifier!
.headingXXL
Extra extra large heading. Also default style of a
h1 tag.
I am a span which looks like a heading. Check out my modifier!
.headingXL
Extra large heading.
I am a span which looks like a heading. Check out my modifier!
.headingL
Large heading. Also default style of a
h2 tag.
I am a span which looks like a heading. Check out my modifier!
.headingM
Medium heading.
I am a span which looks like a heading. Check out my modifier!
.headingS
Small heading. Also default style of a
h3 tag.
I am a span which looks like a heading. Check out my modifier!
.headingXS
Extra small heading. Also default style of a
h4, h5 and h6 tag.
I am a span which looks like a heading. Check out my modifier!
.headingXXS
Extra extra small heading that is the same size as body copy.