Text

Font Size

Font size classes that correspond to our font scale.

Classes:

  • u-fontSizeXs
  • u-fontSizeSm
  • u-fontSizeMd
  • u-fontSizeLg
  • u-fontSizeXl
  • u-fontSizeXxl

Extra-Small

Small

Medium

Large

Extra-Large

Extra-Extra-Large

Alignment

Apply text styling properties with these classes:

  • u-textCenter: Applies text-align: center
  • u-textLeft: Applies text-align: left
  • u-textRight: Applies text-align: right
  • u-textNoWrap: Applies white-space: nowrap to ensure text does not break into two lines
  • u-textEllipsis: Applies text-overflow: ellipsis and overflow: hidden; to crop text if it has to break to a second line

Text that will be cut short with an ellipsis using u-textEllipsis and u-textNoWrap

Centered text.

Right-aligned text.

Decoration

Text decoration classes for giving an underline or strike through.

Classes:

  • u-textUnderline
  • u-textLineThrough
  • u-textDecorationNone

Underline

Line Through

No decoration

Weight

Text weight classes for our primary font weights. Note, can't be applied to Museo Fonts.

Classes:

  • u-textNormal
  • u-textSemiBold
  • u-textBold

Normal

Semi Bold

Bold

Responsive

Use breakpoints to specifiy minimum screen widths for all text properties.

Breakpoints: xs, sm, md and lg

Class Examples:

  • u-xs-textCenter, u-sm-textLeft, u-lg-textRight
  • u-xs-fontSizeSm, u-md-fontSizeLg, u-lg-textBold