Text
- HTML/CSS:Dev Ready
- Layout:Desktop Only
For consistent typography throughout the application, we created text helper classes for headings and body text.
Text: Body Size Default
Preview
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 (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.
The text helper classes help maintain visual hierarchy separately from the structural markup hierarchy.
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 |