Components › Utilities

Text

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

BodyBody › DefaultBody › SmallBodydev ready

Preview

Code

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

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.

This body-small text helper sets smaller, subtler body copy. It is typically used as supportive text.

HeadingHeading › LargeHeading › MediumHeading › SmallHeadingdev ready

Preview

Code

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

The large heading helpers create large headings. On smaller form factors, these appear thesame size as medium headings, but bolder. On larger form factors, they arelighter and bigger.

These are rarely used in the app, and are reserved for extremely largetext to showcase data (such as totals or stats).

The medium heading helper is typically the largest heading on a page and usually designates a page title.

Small Headings are used for smaller content areas such as list sections orcard titles.

TitleTitle › NormalTitle › UppercaseTitledev ready

Preview

Code

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

Title headings are used for small mini headers that don’t need to bringvisual attention to themselves. They usually label small content areas liketable columns and list sections.

Line Height ResetLine Height Reset

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

This helper sets the line-height to the value of 1. You usually don’t need this class since most components will inherit this globally from the body element. It exists if you still need to specifically set it.

ColorColor › DefaultColor › WeakColor › ErrorColor › InverseColor › Inverse - WeakColordev ready

Preview

Code

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

This helper sets color to body copy.

AlignmentAlignmentdev ready

Preview

Code

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

These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally.

LongformLongformdev ready

Preview

Code

<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>
  <ul>
    <li>The quick brown fox jumps over the lazy dog.</li>
    <li>The quick brown fox jumps over the lazy dog.
      <ul>
        <li>The quick brown fox jumps over the lazy dog.</li>
        <li>The quick brown fox jumps over the lazy dog.
          <ul>
            <li>The quick brown fox jumps over the lazy dog.</li>
            <li>The quick brown fox jumps over the lazy dog.</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <h3 class="slds-text-heading--small">Heading</h3>
  <ol>
    <li>The quick brown fox jumps over the lazy dog.</li>
    <li>The quick brown fox jumps over the lazy dog.
      <ol>
        <li>The quick brown fox jumps over the lazy dog.</li>
        <li>The quick brown fox jumps over the lazy dog.
          <ol>
            <li>The quick brown fox jumps over the lazy dog.</li>
            <li>The quick brown fox jumps over the lazy dog.</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

Almost all areas of our application have headings, paragraphs and lists resetwith no additional spacing or lists reset without bullets. So we opt intospacing and bullets instead. Wrap areas of longform content to get these.

Section TitleSection Title › DefaultSection Title › ClosedSection Title › OpenSection Titledev ready

Preview

Code

<h3 class="slds-section__title">Section Title</h3>

Section Titles are interactive titles that open and close sections, typically on a form.

Section Title DividersSection Title Dividersdev ready

Preview

Code

<h3 class="slds-section-title--divider">Section Title</h3>

Section Title Dividers are titles typically for forms, and act as a visual separator for sections.

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-text-body--regular
Applied to:

Outcome:

Creates the 13px regular body copy

Required:

No, optional element or modifier

Comments:

This is the base body font size and is rarely needed

.slds-text-body--small
Applied to:

Outcome:

Creates a more pale-colored 12px copy

Required:

No, optional element or modifier

Comments:

Typically used as supportive text

.slds-text-heading--large
Applied to:

Any heading

Outcome:

Very large 28px heading

Required:

No, optional element or modifier

Comments:

These are rarely used in the app and are reserved for extremely large text to showcase data (such as totals or stats).

.slds-text-heading--medium
Applied to:

Any heading

Outcome:

Large 20px heading

Required:

No, optional element or modifier

Comments:

Typically the largest heading on a page

.slds-text-heading--small
Applied to:

Any heading

Outcome:

Smaller 16px heading

Required:

No, optional element or modifier

Comments:

Used for smaller content areas such as list sections or card titles

.slds-text-title
Applied to:

Any heading

Outcome:

12px heading that is not all caps

Required:

No, optional element or modifier

Comments:

Usually labels small content areas like list sections.

.slds-text-title--caps
Applied to:

Any heading

Outcome:

All caps 12px heading

Required:

No, optional element or modifier

Comments:

Usually labels small content areas like tabs and page header titles.

.slds-text-longform
Applied to:

div

Outcome:

Adds default spacing and list styling within a wrapper

Required:

No, optional element or modifier

Comments:

Our application framework removes default text styling. This adds in margins to large areas

.slds-text-align--left
Applied to:

Any text

Outcome:

Aligns text left

Required:

No, optional element or modifier

Comments:

--

.slds-text-align--center
Applied to:

Any text

Outcome:

Aligns text center

Required:

No, optional element or modifier

Comments:

--

.slds-text-align--right
Applied to:

Any text

Outcome:

Aligns text right

Required:

No, optional element or modifier

Comments:

--

.slds-text-color--default
Applied to:

Any text

Outcome:

Default color of text

Required:

No, optional element or modifier

Comments:

--

.slds-text-color--weak
Applied to:

Any text

Outcome:

Weak color of text

Required:

No, optional element or modifier

Comments:

--

.slds-text-color--error
Applied to:

Any text

Outcome:

Error color of text

Required:

No, optional element or modifier

Comments:

--

.slds-text-color--inverse
Applied to:

Any text

Outcome:

Default color of text on inversed background

Required:

No, optional element or modifier

Comments:

--

.slds-text-color--inverse-weak
Applied to:

Any text

Outcome:

Weak color of text on inversed background

Required:

No, optional element or modifier

Comments:

--

.slds-section
Applied to:

Outcome:

Container for a collapsable sub section through interaction with the section title

Required:

Required

Comments:

These are typically on a form, if content exists to be expanded, applying the .slds-is-open will expand .slds-section__content

.slds-section__title
Applied to:

Outcome:

Title of a section, can contain an interactive button icon to expand/collapse sub section(s)

Required:

Required

Comments:

--

.slds-section__title-action
Applied to:

Outcome:

Interactive titles with icons that open and close sections

Required:

Required

Comments:

--

.slds-section__content
Applied to:

Outcome:

Content of a section that can be expanded/collapse through interaction with the .slds-section__title-action

Required:

Required

Comments:

--

.slds-section-title
Deprecated
Applied to:

Outcome:

Interactive titles with icons that open and close sections

Required:

No, optional element or modifier

Comments:

These are typically on a form

.slds-section-title--divider
Deprecated
Applied to:

Outcome:

Titles that also act as a divider with a grey background

Required:

No, optional element or modifier

Comments:

These are typically on a form

.slds-type-focus
Applied to:

container

Outcome:

Creates a faux link with interactions

Required:

No, optional element or modifier

Comments:

This is used when an actual anchor element can not be used. For example — when a heading and button are next to each other and both need the text underline

.slds-text-heading--label
Deprecated
Applied to:

Any heading

Outcome:

All caps 12px heading

Required:

No, optional element or modifier

Comments:

Usually labels small content areas like tabs and page header titles

.slds-text-heading--label-normal
Deprecated
Applied to:

Any heading

Outcome:

12px heading that is not all caps

Required:

No, optional element or modifier

Comments:

Usually labels small content areas like list sections.