Text
- HTML/CSS:Dev Ready
- Layout:Desktop Only
About Text#
In our framework, all headings (h1
–h6
) 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#
<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#
<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#
<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#
<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#
<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#
<div class="slds-text-title">The quick brown fox jumps over the lazy dog.</div>
Title Uppercase#
<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
- 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.
<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#
<div class="slds-text-align_left">The quick brown fox jumps over the lazy dog.</div>
Align Right#
<div class="slds-text-align_right">The quick brown fox jumps over the lazy dog.</div>
Align Center#
<div class="slds-text-align_center">The quick brown fox jumps over the lazy dog.</div>
Color - Default#
<div class="slds-text-color_default">The quick brown fox jumps over the lazy dog.</div>
Color - Success#
<div class="slds-text-color_success">The quick brown fox jumps over the lazy dog.</div>
Color - Weak#
<div class="slds-text-color_weak">The quick brown fox jumps over the lazy dog.</div>
Color - Error#
<div class="slds-text-color_error">The quick brown fox jumps over the lazy dog.</div>
Color - Destructive Actions#
<div class="slds-text-color_destructive">The quick brown fox jumps over the lazy dog.</div>
Color - Inverse#
<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#
<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#
<div class="slds-text-font_monospace">The quick brown fox jumps over the lazy dog.</div>
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-text-link_reset |
---|---|
Summary | Makes links and buttons appear as regular text |
Restrict | * |
Modifier | True |
Selector | .slds-text-link |
---|---|
Summary | Makes text inside of .slds-text-link_reset to appear as a link. |
Restrict | * |
Modifier | True |
Selector | .slds-text-link_faux |
---|---|
Summary | Creates a faux link with hover interactions |
Restrict | * |
Modifier | True |
Selector | .slds-text-body_regular |
---|---|
Summary | Creates the 13px regular body copy |
Restrict | * |
Modifier | True |
Selector | .slds-text-body_small |
---|---|
Summary | Creates a more pale-colored 12px copy |
Restrict | * |
Modifier | True |
Selector | .slds-text-heading_large |
---|---|
Summary | Very large 28px heading |
Restrict | * |
Modifier | True |
Selector | .slds-text-heading_medium |
---|---|
Summary | Large 20px heading |
Restrict | * |
Modifier | True |
Selector | .slds-text-heading_small |
---|---|
Summary | Smaller 16px heading |
Restrict | * |
Modifier | True |
Selector | .slds-text-title |
---|---|
Summary | 12px heading that is not all caps |
Restrict | * |
Modifier | True |
Selector | .slds-text-title_caps |
---|---|
Summary | All caps 12px heading |
Restrict | * |
Modifier | True |
Selector | .slds-text-title_bold |
---|---|
Summary | Bold 14px heading |
Restrict | * |
Modifier | True |
Selector | .slds-text-color_default |
---|---|
Summary | Default color of text |
Restrict | * |
Modifier | True |
Selector | .slds-text-color_weak |
---|---|
Summary | Weak color of text |
Restrict | * |
Modifier | True |
Selector | .slds-text-color_error |
---|---|
Summary | Error color of text |
Restrict | * |
Modifier | True |
Selector | .slds-text-color_destructive |
---|---|
Summary | Color of text for destructive actions |
Restrict | * |
Modifier | True |
Selector | .slds-text-color_success |
---|---|
Summary | Success color of text |
Restrict | * |
Modifier | True |
Selector | .slds-text-color_inverse |
---|---|
Summary | Default color of text on inversed background |
Restrict | * |
Modifier | True |
Selector | .slds-text-color_inverse-weak |
---|---|
Summary | Weak color of text on inversed background |
Restrict | * |
Modifier | True |
Selector | .slds-text-align_left |
---|---|
Summary | Aligns text left |
Restrict | * |
Modifier | True |
Selector | .slds-text-align_center |
---|---|
Summary | Aligns text center |
Restrict | * |
Modifier | True |
Selector | .slds-text-align_right |
---|---|
Summary | Aligns text right |
Restrict | * |
Modifier | True |
Selector | .slds-text-longform |
---|---|
Summary | Adds default spacing and list styling within a wrapper |
Restrict | * |
Modifier | True |
Selector | .slds-text-font_monospace |
---|---|
Summary | Monospace font family |
Restrict | * |
Modifier | True |
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