Utilities

Text

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

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.

Base#

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

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, text helpers will have an increased text size.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in the appropriate context. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Examples#

Body Size - Small#

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

Mobile context changes

Please be aware that in a mobile context elements with the small body text-size helper class will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.

Heading Size - Large#

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

Mobile context changes

Please be aware that in a mobile context elements with the large heading text-size helper class will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.

Heading Size - Medium#

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

Mobile context changes

Please be aware that in a mobile context elements with the medium heading text-size helper class will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.

Heading Size - Small#

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

Mobile context changes

Please be aware that in a mobile context elements with the small heading text-size helper class will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.

Title#

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

Title Uppercase#

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

Longform#

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Heading

  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
    • The quick brown fox jumps over the lazy dog.
    • The quick brown fox jumps over the lazy dog.
      • The quick brown fox jumps over the lazy dog.
      • The quick brown fox jumps over the lazy dog.

Heading

  1. The quick brown fox jumps over the lazy dog.
  2. The quick brown fox jumps over the lazy dog.
    1. The quick brown fox jumps over the lazy dog.
    2. The quick brown fox jumps over the lazy dog.
      1. The quick brown fox jumps over the lazy dog.
      2. The quick brown fox jumps over the lazy dog.
<div class="slds-text-longform">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <h3 class="slds-text-heading_small">Heading</h3>

Align Left#

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

Align Right#

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

Align Center#

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

Color - Default#

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

Color - Success#

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

Color - Weak#

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

Color - Error#

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

Color - Destructive Actions#

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

Color - Inverse#

The quick brown fox jumps over the lazy dog.
<div class="demo-only" style="padding:0.5rem;background:#16325c">
  <div class="slds-text-color_inverse">The quick brown fox jumps over the lazy dog.</div>
</div>

Color - Inverse - Weak#

The quick brown fox jumps over the lazy dog.
<div class="demo-only" style="padding:0.5rem;background:#16325c">
  <div class="slds-text-color_inverse-weak">The quick brown fox jumps over the lazy dog.</div>
</div>

Font - Monospace#

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

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-title_bold
Summary

Bold 14px 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_destructive
Summary

Color of text for destructive actions

Restrict*
ModifierTrue
Selector.slds-text-color_success
Summary

Success 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
Selector.slds-text-font_monospace
Summary

Monospace font family

Restrict*
ModifierTrue

Text Utility Release Notes

2.11.7

Added

  • Added documentation and examples for mobile/touch context

2.9.4

Fix

  • Revert font-size of text utilities back to their original state for touch devices

2.7.0

Added

  • Added text color utility class, slds-text-color_destructive, for destructive actions