Text

Text

For consistent typography throughout the application, we created text helper classes for headings and body text.

Text: Body Size Default

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-text-body_regular">The quick brown fox jumps over the lazy dog.</div>

Body Size Default

This default helper sets regular body copy. You usually don’t need this class since most components will inherit this globally from the body element. However, it exists if you still need to specifically set it.


About Text

In our framework, all headings (h1h6) are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility.

The text helper classes help maintain visual hierarchy separately from the structural markup hierarchy.


Overview of CSS Classes

Selector.slds-text-link_reset
Summary

Makes links and buttons appear as regular text

Restrict*
ModifierTrue
Selector.slds-text-link
Summary

Makes text inside of .slds-text-link--reset to appear as a link.

Restrict*
ModifierTrue
Selector.slds-text-link_faux
Summary

Creates a faux link with hover interactions

Restrict*
ModifierTrue
Selector.slds-text-body_regular
Summary

Creates the 13px regular body copy

Restrict*
ModifierTrue
Selector.slds-text-body_small
Summary

Creates a more pale-colored 12px copy

Restrict*
ModifierTrue
Selector.slds-text-heading_large
Summary

Very large 28px heading

Restrict*
ModifierTrue
Selector.slds-text-heading_medium
Summary

Large 20px heading

Restrict*
ModifierTrue
Selector.slds-text-heading_small
Summary

Smaller 16px heading

Restrict*
ModifierTrue
Selector.slds-text-title
Summary

12px heading that is not all caps

Restrict*
ModifierTrue
Selector.slds-text-title_caps
Summary

All caps 12px heading

Restrict*
ModifierTrue
Selector.slds-text-color_default
Summary

Default color of text

Restrict*
ModifierTrue
Selector.slds-text-color_weak
Summary

Weak color of text

Restrict*
ModifierTrue
Selector.slds-text-color_error
Summary

Error color of text

Restrict*
ModifierTrue
Selector.slds-text-color_inverse
Summary

Default color of text on inversed background

Restrict*
ModifierTrue
Selector.slds-text-color_inverse-weak
Summary

Weak color of text on inversed background

Restrict*
ModifierTrue
Selector.slds-text-align_left
Summary

Aligns text left

Restrict*
ModifierTrue
Selector.slds-text-align_center
Summary

Aligns text center

Restrict*
ModifierTrue
Selector.slds-text-align_right
Summary

Aligns text right

Restrict*
ModifierTrue
Selector.slds-text-longform
Summary

Adds default spacing and list styling within a wrapper

Restrict*
ModifierTrue