Typography Helper Classes

TIP

See Headings and Paragraphs for default typography styles.

Font Size Helper Classes

h-type-extra-large

h-type-largest

h-type-larger

h-type-large

h-type-base

h-type-small

h-extra-small

  <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-type-small">h-type-small</p>
  <p class="h-extra-small">h-extra-small</p>

---

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-bold

h-type-uppercase

  <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-bold">h-type-bold</p>
  <p class="h-type-uppercase">h-type-uppercase</p>

Special Helper Classes

Force Word-Break

.h-break-word

Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptua

<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.

Loremipsumdolor sitametconse tetursadipscingelitrseddiamnonumy eirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuased diamnonumyeirmodtemporinviduntutlaboreetdolorema gnaaliquyameratseddiamvoluptua

<span class="h-no-wrap">
Loremipsumdolor sitametconse tetursadipscingelitrseddiamnonumy       eirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuased
diamnonumyeirmodtemporinviduntutlaboreetdolorema gnaaliquyameratseddiamvoluptua
</span>

Force Break-All

.h-break-all

Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua

<span class="h-break-all">
Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua
</span>

Force Break-Spaces

.h-break-spaces

Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua

<span class="h-break-spaces">
Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua
</span>

Text Overflow

.h-overflow-hidden
.h-overflow-auto

.h-overflow-ellipsis (works in combination with a limited width)

Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua

<span class="h-overflow-ellipsis h-block h-width-20">
Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua
</span>

Capitalize first letter

.h-capitalize-first-letter

lorem ipsum

<span class="h-capitalize-first-letter">lorem ipsum</span>