Typography
Headlines
::: demo
Headline H1
Headline H2
Headline H3
Headline H4
Headline H5
Headline H6
:::Paragraph Styles
::: demo
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.
::: demo
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
::: demo
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
::: demo
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
::: demo Apparently we had reached a great height in the atmosphere. :::
Marked Text
<mark>, <mark class="-is-current-match">
::: demo
Text with marked text for highlighting.
Text with current match mark styling.
:::Special Helper Classes
Force Word-Break
.h-break-word ::: demo 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.
::: demo Loremipsumdolor sitametconse tetursadipscingelitrseddiamnonumy eirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuased diamnonumyeirmodtemporinviduntutlaboreetdolorema gnaaliquyameratseddiamvoluptua :::
Force Break-All
.h-break-all
::: demo Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaseddiamnonumyeirmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua :::
Force Break-Spaces
.h-break-spaces
::: demo 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)
::: demo Loremipsumdo lorsitame tconsetetursadipscingelit rseddiamnonumyeirm odtemporinviduntutlaboreetdoloremagnaaliquyamera tseddiamvoluptuaseddiamnonumyei rmodtemporinviduntutlabo reetdoloremagnaaliquyameratseddiamvoluptua :::
Capitalize first letter
.h-capitalize-first-letter
::: demo lorem ipsum :::