Headings
Weavr includes styles for headings h1 through h6, but to be honest, we’ve never run into a situation where we needed h5 and h6, so those styles are fairly arbitrary at the moment. Here’s a demonstration:
Here's an H1
Here's an H2
Here's an H3
Here's an H4
Here's an H5
Here's an H6
Subheadings and Superheadings
You can define subheadings and “superheadings” (we may have made that term up) by adding a span inside the heading tag with the corresponding class:
This is a heading and this is the subheading
<h1>This is a heading <span class="subheading">and this is the subheading</span></h1>
This is a superheading above a heading
<h1><span class="superheading">This is a superheading</span> above a heading</h1>
NOTE: The empty space in the markup before the subheading span and after the superheading span is not necessary visually, but it is necessary for search engines and web crawlers to read the heading correctly.
Bordered headings
Headings can also be displayed with a border and padding for visual effect. Simply add the class .bordered to the heading tag, along with an optional color class. The .bordered class sets the display to inline-block.
A bordered heading
<div class="align-center">
<h3 class="bordered">A bordered heading</h3>
</div>
A bordered heading with color
<div class="align-center">
<h3 class="bordered brand-teal">A bordered heading with color</h3>
</div>
Bordered headings display white against dark and colored backgrounds.
A bordered heading on purple
<div class="align-center brand-purple-bg padding-2x">
<h3 class="bordered">A bordered heading on purple</h3>
</div>
Large and Small modifiers
There may be times when you need to use a specific heading tag for semantics but want it to be larger or smaller for visual effect. Headings h1-h3 can be made larger or smaller by adding a .large or .small modifier class. An h1.small is the same font-size as a unmodified h2, an h2.large is the same font-size as an unmodified h1, and so on. Note that subheadings and superheadings scale with the heading.
Large H1 subheading
Normal H1 subheading
Small H1 subheading
Large H2 subheading
Normal H2 subheading
Small H2 subheading
Large H3 subheading
Normal H3 subheading
Small H3 subheading
<h1 class="large">Large H1 <span class="subheading">subheading</span></h1>
<h1>Normal H1 <span class="subheading">subheading</span></h1>
<h1 class="small">Small H1 <span class="subheading">subheading</span></h1>
<h2 class="large">Large H2 <span class="subheading">subheading</span></h2>
<h2>Normal H2 <span class="subheading">subheading</span></h2>
<h2 class="small">Small H2 <span class="subheading">subheading</span></h2>
<h3 class="large">Large H3 <span class="subheading">subheading</span></h3>
<h3>Normal H3 <span class="subheading">subheading</span></h3>
<h3 class="small">Small H3 <span class="subheading">subheading</span></h3>