# Typography
# Headlines
Headline H1
Headline H2
Headline H3
Headline H4
Headline H5
Headline H6
hide code
<h1>Headline H1</h1>
<h2>Headline H2</h2>
<h3>Headline H3</h3>
<h4>Headline H4</h4>
<h5>Headline H5</h5>
<h6>Headline H6</h6>
# Paragraph Styles
Apparently we had reached a great height in the atmosphere.
Apparently we had reached a great height in the atmosphere.
Apparently we had reached a great height in the atmosphere.
Apparently we had reached a great height in the atmosphere.
Apparently we had reached a great height in the atmosphere.
Apparently we had reached a great height in the atmosphere.
paragraph with a <span class='-bold'>-Tag.
paragraph with a <span class='-italic'>-Tag.
<code class="inline">Apparently we had reached a great height in the atmosphere.</code>
hide code
<p>Apparently we had reached a great height in the atmosphere.</p>
<p class="tiny">Apparently we had reached a great height in the atmosphere.</p>
<p><small>Apparently we had reached a great height in the atmosphere.</small></p>
<p><strong>Apparently we had reached a great height in the atmosphere.</strong></p>
<p><b>Apparently we had reached a great height in the atmosphere.</b></p>
<p><em>Apparently we had reached a great height in the atmosphere.</em></p>
<p>paragraph with a <span class="-bold"><span class='-bold'>-Tag</span>.</p>
<p>paragraph with a <span class="-italic"><span class='-italic'>-Tag</span>.</p>
<code class="inline"><code class="inline">Apparently we had reached a great height in the atmosphere.</code></code>
# Type Helper Classes
TIP
See Color Helper Classes for Typography Color Classes.
h-type-align-center
h-type-align-left
h-type-align-right
h-type-emphasize
h-type-uppercase
hide code
<div class="h-highlight-block">
<p class="h-type-align-center">h-type-align-center</p>
<p class="h-type-align-left">h-type-align-left</p>
<p class="h-type-align-right">h-type-align-right</p>
<p class="h-type-emphasize">h-type-emphasize</p>
<p class="h-type-uppercase">h-type-uppercase</p>
</div>
# Font Size Helper Classes
h-type-extra-large
h-type-largest
h-type-larger
h-type-large
h-type-base
h-small
h-type-small
h-extra-small
hide code
<div class="h-highlight-block">
<p class="h-type-extra-large">h-type-extra-large</p>
<p class="h-type-largest">h-type-largest</p>
<p class="h-type-larger">h-type-larger</p>
<p class="h-type-large">h-type-large</p>
<p class="h-type-base">h-type-base</p>
<p class="h-small">h-small</p>
<p class="h-type-small">h-type-small</p>
<p class="h-extra-small">h-extra-small</p>
</div>
# Text Blocks
# Blockquote
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
hide code
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
# Code Block
Apparently we had reached a great height in the atmosphere.
hide code
<code>Apparently we had reached a great height in the atmosphere.</code># Special Helper Classes
# Force Word-Break
.h-break-word
hide code
<span class="h-break-word">
Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptua
</span>
# Force No-Wrap
TIP
.h-no-wrap
The nowrap value renders text based on the following rules:
- The text is not wrapped to fit the container.
- MULTIPLE SPACES and TABS are collapsed to a single space.
- SOFT BREAK LINES are converted to single space.
hide code
<span class="h-no-wrap">
Loremipsumdolor sitametconse tetursadipscingelitrseddiamnonumy eirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuased
diamnonumyeirmodtemporinviduntutlaboreetdolorema gnaaliquyameratseddiamvoluptua
</span>
# Force Break-All
.h-break-all
hide code
<span class="h-break-all">
Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua
</span>
# Force Break-Spaces
.h-break-spaces
hide code
<span class="h-break-spaces">
Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua
</span>
# Overflow
.h-overflow-hidden
.h-overflow-auto
.h-overflow-ellipsis (works in combination with a limited width)
hide code
<span class="h-overflow-ellipsis h-block h-width-20">
Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua
</span>