Utilities
Padding
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
Adjust whitespace by applying horizontal and vertical padding helpers.
About Padding#
The base unit of all of our spacing metrics is 4.
Before using
- Most components already come with spacing included. These utility classes are for added convenience in laying out components.
- Classes prefixed by
slds-p-are used for adding padding. Classes prefixed inslds-m-are used for adding margin - The directions available for the spacing classes are
top,right,bottom, andleft. - You can use the
verticalshortcut for bothtopandbottom,horizontalfor bothrightandleft, andaroundfor all sides. - Use the
_xxx-smallthrough_xx-largescale to choose the size needed. - You can also use
noneas the size on any of the directions to enforce zero padding. - Where vertical centering is required, check out our centered media object instead of applying extra
paddingormargin.
Examples#
Location - Top#
<div class="slds-p-top_none"></div><div class="slds-p-top_xxx-small"></div><div class="slds-p-top_xx-small"></div><div class="slds-p-top_x-small"></div><div class="slds-p-top_small"></div><div class="slds-p-top_medium"></div><div class="slds-p-top_large"></div><div class="slds-p-top_x-large"></div><div class="slds-p-top_xx-large"></div>Location - Left#
<div class="slds-p-left_none"></div><div class="slds-p-left_xxx-small"></div><div class="slds-p-left_xx-small"></div><div class="slds-p-left_x-small"></div><div class="slds-p-left_small"></div><div class="slds-p-left_medium"></div><div class="slds-p-left_large"></div><div class="slds-p-left_x-large"></div><div class="slds-p-left_xx-large"></div>Location - Bottom#
<div class="slds-p-bottom_none"></div><div class="slds-p-bottom_xxx-small"></div><div class="slds-p-bottom_xx-small"></div><div class="slds-p-bottom_x-small"></div><div class="slds-p-bottom_small"></div><div class="slds-p-bottom_medium"></div><div class="slds-p-bottom_large"></div><div class="slds-p-bottom_x-large"></div><div class="slds-p-bottom_xx-large"></div>Location - Right#
<div class="slds-p-right_none"></div><div class="slds-p-right_xxx-small"></div><div class="slds-p-right_xx-small"></div><div class="slds-p-right_x-small"></div><div class="slds-p-right_small"></div><div class="slds-p-right_medium"></div><div class="slds-p-right_large"></div><div class="slds-p-right_x-large"></div><div class="slds-p-right_xx-large"></div>Location - Horizontal#
<div class="slds-p-horizontal_none"></div><div class="slds-p-horizontal_xxx-small"></div><div class="slds-p-horizontal_xx-small"></div><div class="slds-p-horizontal_x-small"></div><div class="slds-p-horizontal_small"></div><div class="slds-p-horizontal_medium"></div><div class="slds-p-horizontal_large"></div><div class="slds-p-horizontal_x-large"></div><div class="slds-p-horizontal_xx-large"></div>Location - Vertical#
<div class="slds-p-vertical_none"></div><div class="slds-p-vertical_xxx-small"></div><div class="slds-p-vertical_xx-small"></div><div class="slds-p-vertical_x-small"></div><div class="slds-p-vertical_small"></div><div class="slds-p-vertical_medium"></div><div class="slds-p-vertical_large"></div><div class="slds-p-vertical_x-large"></div><div class="slds-p-vertical_xx-large"></div>Location - Around#
<div class="slds-p-around_none"></div><div class="slds-p-around_xxx-small"></div><div class="slds-p-around_xx-small"></div><div class="slds-p-around_x-small"></div><div class="slds-p-around_small"></div><div class="slds-p-around_medium"></div><div class="slds-p-around_large"></div><div class="slds-p-around_x-large"></div><div class="slds-p-around_xx-large"></div>Variable Density Classes#
In addition to the tokens we've created to support the new density settings, we have also created variable density classes for both padding and margin. The tables below show how the values change between the Comfy and Compact settings.
Around#
| Class Name | Comfy Value | Compact Value |
|---|---|---|
slds-var-p-around_xxx-small | 0.125rem | 0.125rem |
slds-var-p-around_xx-small | 0.25rem | 0.125rem |
slds-var-p-around_x-small | 0.5rem | 0.125rem |
slds-var-p-around_small | 0.75rem | 0.25rem |
slds-var-p-around_medium | 1rem | 0.5rem |
slds-var-p-around_large | 1.5rem | 0.75rem |
slds-var-p-around_x-large | 2rem | 1rem |
slds-var-p-around_xx-large | 3rem | 1.5rem |
Left, Right, Horizontal#
| Class Name | Comfy Value | Compact Value |
|---|---|---|
slds-var-p-*_xxx-small | 0.125rem | 0.125rem |
slds-var-p-*_xx-small | 0.25rem | 0.125rem |
slds-var-p-*_x-small | 0.5rem | 0.25rem |
slds-var-p-*_small | 0.75rem | 0.5rem |
slds-var-p-*_medium | 1rem | 0.75rem |
slds-var-p-*_large | 1.5rem | 0.75rem |
slds-var-p-*_x-large | 2rem | 1rem |
slds-var-p-*_xx-large | 3rem | 1.5rem |
Top, Bottom, Vertical#
| Class Name | Comfy Value | Compact Value |
|---|---|---|
slds-var-p-*_xxx-small | 0.125rem | 0.125rem |
slds-var-p-*_xx-small | 0.25rem | 0.125rem |
slds-var-p-*_x-small | 0.5rem | 0.25rem |
slds-var-p-*_small | 0.75rem | 0.5rem |
slds-var-p-*_medium | 1rem | 0.5rem |
slds-var-p-*_large | 1.5rem | 0.75rem |
slds-var-p-*_x-large | 2rem | 1rem |
slds-var-p-*_xx-large | 3rem | 1.5rem |
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-p-*_xxx-small, .slds-var-p-*_xxx-small |
|---|---|
| Summary | Adds .125rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*_xx-small, .slds-var-p-*_xx-small |
|---|---|
| Summary | Adds .25rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*_x-small, .slds-var-p-*_x-small |
|---|---|
| Summary | Adds .5rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*_small, .slds-var-p-*_small |
|---|---|
| Summary | Adds .75rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*_medium, .slds-var-p-*_medium |
|---|---|
| Summary | Adds 1rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*_large, .slds-var-p-*_large |
|---|---|
| Summary | Adds 1.5rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*_x-large, .slds-var-p-*_x-large |
|---|---|
| Summary | Adds 2rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*_xx-large, .slds-var-p-*_xx-large |
|---|---|
| Summary | Adds 3rem padding to the side specified |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*-vertical_*, .slds-var-p-*-vertical_* |
|---|---|
| Summary | Adds the specified padding to both top and bottom |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*-horizontal_*, .slds-var-p-*-horizontal_* |
|---|---|
| Summary | Adds the specified padding to both sides |
| Restrict | * |
| Modifier | True |
| Selector | .slds-p-*-around_*, .slds-var-p-*-around_* |
|---|---|
| Summary | Adds the specified padding all the way around the element |
| Restrict | * |
| Modifier | True |
Padding Utility Release Notes
2.8.0
Added
- Added documentation detailing the values of the variable density classes in Comfy and Compact modes