Text
Text utility classes use design tokens from your Cornerstone theme and standard CSS properties to style text elements on the fly.
The classes on this page cover the most common needs: picking a size and weight for body copy, styling headings, aligning paragraphs, truncating overflow, and changing font color. Every class is built on your theme’s typography tokens, so switching themes or tweaking your type scale updates the whole site at once.
Body
Use cs-body-* classes to style the main content of your pages. Each class specifies a font-size that corresponds to a font size token from your theme.
3xs and 2xs fall below typical legibility. It’s best to keep their use to non-essential UI only (e.g. labels, metadata) to maintain accessibility.
Alternatively, use cs-body to apply the same styling without an explicit font size.
| Class Name | Preview |
|---|---|
cs-body-3xs | Five boxing wizards |
cs-body-2xs | Five boxing wizards |
cs-body-xs | Five boxing wizards |
cs-body-s | Five boxing wizards |
cs-body-m | Five boxing wizards |
cs-body-l | Five boxing wizards |
cs-body-xl | Five boxing wizards |
cs-body-2xl | Five boxing wizards |
cs-body-3xl | Five boxing wizards |
cs-body-4xl | Five boxing wizards |
cs-body-5xl | Five boxing wizards |
Headings
Use cs-heading-* classes to style section titles and headings in your content. Each class specifies a font-size that corresponds to a font size token from your theme.
Alternatively, use cs-heading to apply the same styling without an explicit font size.
| Class Name | Preview |
|---|---|
cs-heading-3xs | Five boxing wizards |
cs-heading-2xs | Five boxing wizards |
cs-heading-xs | Five boxing wizards |
cs-heading-s | Five boxing wizards |
cs-heading-m | Five boxing wizards |
cs-heading-l | Five boxing wizards |
cs-heading-xl | Five boxing wizards |
cs-heading-2xl | Five boxing wizards |
cs-heading-3xl | Five boxing wizards |
cs-heading-4xl | Five boxing wizards |
cs-heading-5xl | Five boxing wizards |
Captions
Use cs-caption-* classes to style descriptions or auxiliary text in your content. Each class specifies a font-size that corresponds to a font size token from your theme.
Alternatively, use cs-caption to apply the same styling without an explicit font size.
| Class Name | Preview |
|---|---|
cs-caption-3xs | Five boxing wizards |
cs-caption-2xs | Five boxing wizards |
cs-caption-xs | Five boxing wizards |
cs-caption-s | Five boxing wizards |
cs-caption-m | Five boxing wizards |
cs-caption-l | Five boxing wizards |
cs-caption-xl | Five boxing wizards |
cs-caption-2xl | Five boxing wizards |
cs-caption-3xl | Five boxing wizards |
cs-caption-4xl | Five boxing wizards |
cs-caption-5xl | Five boxing wizards |
Longform
Use cs-longform-* classes to style lengthy content like essays or blog posts. Each class specifies a font-size that corresponds to a font size token from your theme.
Alternatively, use cs-longform to apply the same styling without an explicit font size.
| Class Name | Preview |
|---|---|
cs-longform-3xs | Five boxing wizards |
cs-longform-2xs | Five boxing wizards |
cs-longform-xs | Five boxing wizards |
cs-longform-s | Five boxing wizards |
cs-longform-m | Five boxing wizards |
cs-longform-l | Five boxing wizards |
cs-longform-xl | Five boxing wizards |
cs-longform-2xl | Five boxing wizards |
cs-longform-3xl | Five boxing wizards |
cs-longform-4xl | Five boxing wizards |
cs-longform-5xl | Five boxing wizards |
Links
Use cs-link to give interactive text a link-like appearance. Alternatively, use cs-link-plain to remove typical link styles from <a> elements.
| Class Name | Preview |
|---|---|
cs-link | Five boxing wizards |
cs-link-plain | Five boxing wizards |
Lists
Ordered (<ol>) and unordered (<ul>) lists are given default styles by either Cornerstone’s native styles or your browser. Use cs-list-plain to clear any built-in list styles.
| Class Name | Preview |
|---|---|
cs-list-plain |
|
Form Controls
Use cs-form-control-* classes to style labels, values, placeholders, and hints outside of typical form control contexts with form control tokens from your theme.
| Class Name | Preview |
|---|---|
cs-form-control-label | Five boxing wizards |
cs-form-control-value | Five boxing wizards |
cs-form-control-placeholder | Five boxing wizards |
cs-form-control-hint | Five boxing wizards |
Font Size
Use single-purpose cs-font-size-* classes to apply a given font size from your theme to any element without additional styling.
| Class Name | Preview |
|---|---|
cs-font-size-3xs | Five boxing wizards |
cs-font-size-2xs | Five boxing wizards |
cs-font-size-xs | Five boxing wizards |
cs-font-size-s | Five boxing wizards |
cs-font-size-m | Five boxing wizards |
cs-font-size-l | Five boxing wizards |
cs-font-size-xl | Five boxing wizards |
cs-font-size-2xl | Five boxing wizards |
cs-font-size-3xl | Five boxing wizards |
cs-font-size-4xl | Five boxing wizards |
cs-font-size-5xl | Five boxing wizards |
Font Weight
Use single-purpose cs-font-weight-* classes to apply a given font weight from your theme to any element without additional styling.
| Class Name | Preview |
|---|---|
cs-font-weight-light | Five boxing wizards |
cs-font-weight-normal | Five boxing wizards |
cs-font-weight-semibold | Five boxing wizards |
cs-font-weight-bold | Five boxing wizards |
Text Color
Use single-purpose cs-color-text-* classes to apply a given text color from your theme to any element without additional styling.
| Class Name | Preview |
|---|---|
cs-color-text-quiet | Five boxing wizards |
cs-color-text-normal | Five boxing wizards |
cs-color-text-link | Five boxing wizards |
Wrapping
Use these classes to control how text wraps across lines. They apply standard CSS text-wrap values.
| Class Name | Preview |
|---|---|
cs-text-nowrap | |
cs-text-balance | The five boxing wizards jump quickly. How quickly daft jumping zebras vex! |
cs-text-pretty | The five boxing wizards jump quickly. How quickly daft jumping zebras vex! |
cs-text-pretty is wrapped in an @supports rule because Firefox does not yet support text-wrap: pretty. In unsupported browsers, the class has no effect and text wraps normally.
The original cs-text-wrap-nowrap, cs-text-wrap-balance, and cs-text-wrap-pretty class names continue to work as aliases for backwards compatibility. These older names are deprecated and will be removed in a future major version; update to the shorter cs-text-* names above.
Transform
Use these classes to change the case of text. They apply standard CSS text-transform values.
| Class Name | Preview |
|---|---|
cs-text-uppercase | Five boxing wizards |
cs-text-lowercase | Five boxing wizards |
cs-text-capitalize | Five boxing wizards |
Large blocks of uppercase text are harder for everyone to read and especially difficult for folks with dyslexia. Reserve it for buttons, badges, or short headings.
Alignment
Use these classes to align text within its container. They apply standard CSS text-align values using logical properties, so they adapt automatically to the document’s writing direction.
| Class Name | Preview |
|---|---|
cs-text-start | Five boxing wizards |
cs-text-center | Five boxing wizards |
cs-text-end | Five boxing wizards |
cs-text-justify | The five boxing wizards jump quickly. How quickly daft jumping zebras vex! |
Justified text can create uneven word spacing that’s harder for everyone to read and especially difficult for folks with dyslexia. Reserve it for short, narrow text columns.
Truncation
Use the cs-text-truncate class to truncate text with an ellipsis instead of letting it overflow or wrap.
| Class Name | Preview |
|---|---|
cs-text-truncate | The five boxing wizards jump quickly. How quickly daft jumping zebras vex! |