Typography

We provide a variety of utility classes that can be used on their own; chained together with components, and/or chained together with other utility classes to create various UI needs. Apply classes to the parent to avoid repeating the utility unnecessarily whenever possible.

Styles

ClassDescription
.u-textXsmallSmall font-size (12px).
.u-textSmallSmall font-size (14px).
.u-textRegularBase font-size (16px).
.u-textMediumMedium font-size (18px).
.u-textLargeLarge font-size (20px).
.u-textXlargeXlarge font-size (26px).
.u-textMediumWeightMedium text.
.u-textBoldBold text.
.u-textNormalNormal text.
.u-textMutedMute text.
.u-textUnderlineUnderline text.
.u-textPrimaryMatch the primary color.
.u-textDangerMatch the danger color.
.u-textContrastMatch the contrast color.
.u-textTruncatePrevent text from wrapping onto multiple lines, and truncate with an ellipsis.
.u-textBreakBreak strings if their length exceeds the width of their container.
.u-textNoBreakPrevents text from wrapping into multiple lines.
.u-textUppercaseConverts all text to uppercase.
.u-textSubOverrides line-height for sub-text on wrapping lines
.u-textHeadingHeading font family

Alignment

ClassDescription
.u-textLeft
.u-textLeft@{small,medium,large}
Align text to the left.
.u-textCenter
.u-textCenter@{small,medium,large}
Align text to the center.
.u-textRight
.u-textRight@{small,medium,large}
Align text to the right.

Headings

Our headings are "fluid" by default; as they scale down naturally as the screen gets smaller - but we also have utilities that allow you to override font-sizes and take advantage of this whenever needed.

ClassExample
.u-textFluid--h1-h2Fluid text
.u-textFluid--h2-h3Fluid text
.u-textFluid--h3-h4Fluid text
.u-textFluid--mediumFluid text
.u-textFluid--largeFluid text
.u-textFluid--xlargeFluid text

Links

Links have default styles, but we also make available several utilities that allow you to modify them on the fly to your needs.

ClassExample
.u-linkDefault link
.u-linkDefaultStatic link
.u-linkMutedMuted link
.u-linkContrastContrast link
.u-linkHeadingHeading link
.u-linkUnderlineUnderline link