The following patterns have been developed to be both fully-extensible and provide the best possible rendering & copy flow in the largest number of contexts possible.
All HTML headings, <h1>
through <h6>
are available in both light and
dark themes.
By adding a typeface selector (e.g. .font-family-base-light
)
or wrapping these tags in a heading selector (e.g.
.page-header
) you can apply specific typefaces or other style treatments to any heading. For
non-header elements, you can use selectors like .font-size-h1
through .font-size-h6
to apply the same font-sizes illustrated below.
<h1>reachout: the outlet</h1>
<h2>reachout: the outlet</h2>
<h3>reachout: the outlet</h3>
<h4>reachout: the outlet</h4>
<h5>reachout: the outlet</h5>
<h6>reachout: the outlet</h6>
The following utilities are available to set various font sizes.
reachout: the outlet
<p class="font-size-large">reachout: the outlet</p>
reachout: the outlet
<p class="font-size-base">reachout: the outlet</p>
reachout: the outlet
<p class="font-size-small">reachout: the outlet</p>
reachout: the outlet
<p class="font-size-smaller">reachout: the outlet</p>