4.4.5 #Style.typography.text Text Classes

Toggle example guides Toggle HTML markup

The text classes to format the text of any html element.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling

The quick brown fox jumps over the lazy dog 0123456789

.sb-display--l
Used for single dates when visualizing data

The quick brown fox jumps over the lazy dog 0123456789

.sb-display
Used for big numbers when visualizing data

The quick brown fox jumps over the lazy dog 0123456789

.sb-title--l
Used for page titles

The quick brown fox jumps over the lazy dog 0123456789

.sb-title
Used for main titles in different page sections

The quick brown fox jumps over the lazy dog 0123456789

.sb-title--s
Used for smaller titles

The quick brown fox jumps over the lazy dog 0123456789

.sb-text
Used for buttons and empty state text

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--s
Used for all input controls

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--emphasis
Used for emphasizing text

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--subtle
Used for not distinct text

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--plain
Used for not decorated text

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--uppercase
Used for uppercase text

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--lowercase
Used for lowercase text

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--number
Used to reset numbers to their original alignment

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--smallcaps
Used to display text in small caps

The quick brown fox jumps over the lazy dog 0123456789

.sb-text--milo
Force Milo font

The quick brown fox jumps over the lazy dog 0123456789

Markup
<p class="[modifier class]">The quick brown fox jumps over the lazy dog 0123456789</p>
Source: trumps/_text.scss, line 1