Typography

Styling Type

Documentation and examples for typography, headings, body text, lists, and more.

Text Alignment

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Text Color

Rock provides two primary colors for text used throughout the Rock UI. text-color, which sets the color to the default body color, and text-muted which de-emphasizes the text. Additional colors are available via Color Utilities

Default text color.

Muted text color.

<p class="text-color">Default text color.</p>
<p class="text-muted">Muted text color.</p>

Case

Utilities for controlling the transformation of text.

This is lowercase text (.text-lowercase).

This is uppercase text (.text-uppercase).

This text is capitalized (.text-capitalize).

Class Properties
text-lowercase text-transform: lowercase;
text-uppercase text-transform: uppercase;
text-capitalize text-transform: capitalize;

Font Weight

Utilities for controlling the font weight of an element.

This is text-light.

This is text-normal.

This is text-semibold.

This is text-bold.

Class Properties
text-light font-weight: 300;
text-normal font-weight: 400;
text-semibold font-weight: 700;
text-bold font-weight: 900;

Underline & Strikethrough

Class Properties
text-decoration-none text-decoration: none;
text-linethrough text-decoration: line-through;

Line Height

Utilities for controlling the leading (line height) of an element.

.leading-tight

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-snug

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-relaxed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-loose

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Class Properties
leading-tight line-height: 1.25;
leading-snug line-height: 1.375;
leading-normal line-height: 1.5;
leading-relaxed line-height: 1.625;
leading-loose line-height: 2;