Typography

Headlines

INFO

Headline H1

Headline H2

Headline H3

Headline H4

Headline H5

Headline H6

Paragraph Styles

INFO

Default paragraph text.

Small text in a paragraph.

Strong text in a paragraph.

Bold text. in a paragraph.

Emphasized text in a paragraph.

paragraph with a <span class='-bold'>-Tag.

paragraph with a <span class='-italic'>-Tag.

Type Helper Classes

TIP

See Color Helper Classes for Typography Color Classes.

INFO

h-type-align-center

h-type-align-left

h-type-align-right

h-type-emphasize

h-type-bold

h-type-uppercase

h-type-underline

Font Size Helper Classes

INFO

h-type-extra-large

h-type-largest

h-type-larger

h-type-large

h-type-base

h-small

h-type-small

h-extra-small

Text Blocks

Blockquote

INFO

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.

Code Block

INFO

Apparently we had reached a great height in the atmosphere.

Marked Text

<mark>, <mark class="-is-current-match">

INFO

Text with marked text for highlighting.

Text with current match mark styling.

Special Helper Classes

Force Word-Break

.h-break-word

INFO

Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptua

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.

INFO

Loremipsumdolor sitametconse tetursadipscingelitrseddiamnonumy eirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuased diamnonumyeirmodtemporinviduntutlaboreetdolorema gnaaliquyameratseddiamvoluptua

Force Break-All

.h-break-all

INFO

Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua

Force Break-Spaces

.h-break-spaces

INFO

Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua

Overflow

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

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

INFO

Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua

Capitalize first letter

.h-capitalize-first-letter

INFO

lorem ipsum