534 classes
AlignmentGeneric
Generic Preview
declarations unavailable
BoxSpacing
Changes padding to .75rem
padding: $spacing-small;
BoxSpacing
Changes padding to .5rem
padding: $spacing-x-small;
BoxSpacing
Changes padding to .25rem
padding: $spacing-xx-small;
BoxSpacing
padding: 0, $borders: around);
BoxSpacing
padding: $spacing-small;
BoxSpacing
padding: $spacing-x-small;
BoxSpacing
padding: $spacing-xx-small;
Description ListLayout
Causes description list to display horizontally with `dt` consuming 33% of the space and the `dd` taking up the rest.
display: flex;
flex-wrap: wrap;
Description ListSizing
Marks a description
width: 70%;
Description ListSpacing
Marks a term
width: 30%;
padding-right: $spacing-small;
Description ListSpacing
Marks a description
padding-left: $spacing-xx-small;
Description ListGeneric
Generic Preview
Marks a term
clear: left;
Description ListLayout
display: flex;
flex-wrap: wrap;
Description ListSizing
width: 70%;
Description ListSpacing
width: 30%;
padding-right: $spacing-small;
Description ListGeneric
Generic Preview
declarations unavailable
Description ListSpacing
float: left;
padding-left: $spacing-xx-small;
Description ListLayout
float: left;
clear: left;
FloatsGeneric
Generic Preview
clear: both;
FloatsLayout
Pulls element from document flow and floats left. Text and other elements wrap around it.
float: left;
FloatsLayout
Removes float from an element that has attribute already
float: none;
FloatsLayout
Pulls element from document flow and floats right. Text and other elements wrap around it.
float: right;
FloatsLayout
float: left;
FloatsLayout
float: none;
FloatsLayout
float: right;
GridLayout
Vertically aligns element to bottom of `.slds-grid`
vertical-align: bottom;
align-self: flex-end;
GridLayout
Vertically aligns element to middle of `.slds-grid`
vertical-align: middle;
align-self: center;
GridLayout
Vertically aligns element to top of `.slds-grid`
vertical-align: top;
align-self: flex-start;
GridGeneric
Generic Preview
Initializes a grid column
declarations unavailable
GridSpacing
Bumps grid item(s) away from the other grid items to sit at the bottom, taking up the remaining white-space of the grid container
margin-bottom: auto;
GridSpacing
Bumps grid item(s) away from the other grid items to sit to the left, taking up the remaining white-space of the grid container
margin-left: auto;
GridSpacing
Bumps grid item(s) away from the other grid items to sit to the right, taking up the remaining white-space of the grid container
margin-right: auto;
GridSpacing
Bumps grid item(s) away from the other grid items to sit at the top, taking up the remaining white-space of the grid container
margin-top: auto;
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-bottom: auto;
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-left: auto;
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: auto;
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-top: auto;
GridSizing
Width of container takes up 100% of viewport
width: 100%;
GridSizing
Restrict width of containers to a maximum of 1024px
max-width: rem($mq-large);
GridSpacing
Horizontally positions containers to the left of the viewport
margin-right: auto;
GridSizing
Restrict width of containers to a maximum of 768px
max-width: rem($mq-medium);
GridSpacing
Horizontally positions containers to the right of the viewport
margin-left: auto;
GridSizing
Restrict width of containers to a maximum of 480px
max-width: rem($mq-small);
GridSizing
Restrict width of containers to a maximum of 1280px
max-width: rem($mq-x-large);
GridSizing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
width: 100%;
GridSizing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
max-width: rem($mq-large);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: auto;
GridSizing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
max-width: rem($mq-medium);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-left: auto;
GridSizing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
max-width: rem($mq-small);
GridSizing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
max-width: rem($mq-x-large);
GridSizing
Initializes grid
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
GridSpacing
Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`
margin-right: ($spacing-small * -1);
margin-left: ($spacing-small * -1);
GridSpacing
Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_large`
margin-right: ($spacing-large * -1);
margin-left: ($spacing-large * -1);
GridSpacing
Normalizes the 1rem of padding when nesting a grid in a region with `.slds-p-horizontal_medium`
margin-right: ($spacing-medium * -1);
margin-left: ($spacing-medium * -1);
GridSpacing
Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small`
margin-right: ($spacing-small * -1);
margin-left: ($spacing-small * -1);
GridSpacing
Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-large`
margin-right: ($spacing-x-large * -1);
margin-left: ($spacing-x-large * -1);
GridSpacing
Normalizes the 0.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-small`
margin-right: ($spacing-x-small * -1);
margin-left: ($spacing-x-small * -1);
GridSpacing
Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-large`
margin-right: ($spacing-xx-large * -1);
margin-left: ($spacing-xx-large * -1);
GridSpacing
Normalizes the 0.25rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-small`
margin-right: ($spacing-xx-small * -1);
margin-left: ($spacing-xx-small * -1);
GridSpacing
Normalizes the 0.125rem of padding when nesting a grid in a region with `.slds-p-horizontal_xxx-small`
margin-right: ($spacing-xxx-small * -1);
margin-left: ($spacing-xxx-small * -1);
GridLayout
Initializes grid
flex-direction: row-reverse;
GridLayout
Initializes grid
flex-direction: column;
GridLayout
Columns align in the center to the cross axis and expand it each direction
align-items: center;
align-content: center;
GridLayout
Columns start on the opposite end of the grid's cross axis
align-items: flex-end;
align-content: flex-end;
GridLayout
Columns start at the beginning of the grid's cross axis
align-items: flex-start;
align-content: flex-start;
GridLayout
Initializes grid
flex-direction: column-reverse;
GridLayout
Stretch the grid items for both single row and multi-line rows to fill the height of the parent grid container
align-items: stretch;
align-content: stretch;
GridSizing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-small * -1);
margin-left: ($spacing-small * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-large * -1);
margin-left: ($spacing-large * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-medium * -1);
margin-left: ($spacing-medium * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-small * -1);
margin-left: ($spacing-small * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-x-large * -1);
margin-left: ($spacing-x-large * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-x-small * -1);
margin-left: ($spacing-x-small * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-xx-large * -1);
margin-left: ($spacing-xx-large * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-xx-small * -1);
margin-left: ($spacing-xx-small * -1);
GridSpacing
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
margin-right: ($spacing-xxx-small * -1);
margin-left: ($spacing-xxx-small * -1);
GridLayout
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
flex-direction: row-reverse;
GridLayout
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
flex-direction: column;
GridLayout
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
align-items: center;
align-content: center;
GridLayout
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
align-items: flex-end;
align-content: flex-end;
GridLayout
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
align-items: flex-start;
align-content: flex-start;
GridLayout
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
flex-direction: column-reverse;
GridLayout
The SLDS grid, based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. It includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.
align-items: stretch;
align-content: stretch;
GridLayout
Allows column to grow to children’s content
flex-grow: 1;
GridLayout
Prevents column from growing to children’s content
flex-grow: 0;
GridSpacing
Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-small * -1);
margin-left: ($spacing-small * -1);
GridSpacing
Apply 24px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-large * -1);
margin-left: ($spacing-large * -1);
GridSpacing
Apply 16px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-medium * -1);
margin-left: ($spacing-medium * -1);
GridSpacing
Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-small * -1);
margin-left: ($spacing-small * -1);
GridSpacing
Apply 32px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-x-large * -1);
margin-left: ($spacing-x-large * -1);
GridSpacing
Apply 8px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-x-small * -1);
margin-left: ($spacing-x-small * -1);
GridSpacing
Apply 48px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-xx-large * -1);
margin-left: ($spacing-xx-large * -1);
GridSpacing
Apply 4px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-xx-small * -1);
margin-left: ($spacing-xx-small * -1);
GridSpacing
Apply 2px gutters to only direct column children when you add this class to an `slds-grid` element
margin-right: ($spacing-xxx-small * -1);
margin-left: ($spacing-xxx-small * -1);
GridSizing
Needed when truncation is nested in a flexible container in a grid
flex: 1 1 0%;
min-width: 0;
GridLayout
Removes flexbox from grid column
flex: none;
GridSizing
Sets the column to a min-width of 0
min-width: 0;
GridLayout
Keeps columns on one line. Allows columns to stretch and fill 100% of the parent’s width and height.
flex: 1 1 auto;
flex-wrap: nowrap;
align-items: stretch;
GridLayout
Allows column to shrink to children's content
flex-shrink: 1;
GridLayout
Prevents column from shrinking to children's content
flex-shrink: 0;
GridLayout
Allows columns to wrap when they exceed 100% of their parent's width
flex-wrap: wrap;
align-items: flex-start;
Horizontal ListGeneric
Generic Preview
declarations unavailable
LayoutSpacing
Assumes element below is connected
margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
LayoutSpacing
Global margin reset that can be applied to any element
margin: 0;
Line ClampGeneric
Generic Preview
Sets default line clamp of 3 lines for multi-line truncation, can be altered by a token
declarations unavailable
Line ClampGeneric
Generic Preview
Sets line clamp for large multi-line truncation
declarations unavailable
Line ClampGeneric
Generic Preview
Sets line clamp for medium multi-line truncation
declarations unavailable
Line ClampGeneric
Generic Preview
Sets line clamp for small multi-line truncation
declarations unavailable
Line ClampGeneric
Generic Preview
Sets line clamp for x-small multi-line truncation
declarations unavailable
MarginSpacing
Adds 1.5rem margin to the side specified
margin: $spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin: $spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin: $spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin: $spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin: $spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin: $spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin: $spacing-xx-small;
MarginSpacing
Adds .125rem margin to the side specified
margin: $spacing-xxx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-medium;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: 0 !important;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-x-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-x-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-xx-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-xx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin: $spacing-xxx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-bottom: $spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-bottom: $spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-bottom: $spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-bottom: $spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-bottom: $spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-bottom: $spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-bottom: $spacing-xx-small;
MarginSpacing
Adds .125rem margin to the side specified
margin-bottom: $spacing-xxx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-medium;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: 0 !important;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-x-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-x-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-xx-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-xx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-bottom: $spacing-xxx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-left: $spacing-large;
margin-right: $spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-left: $spacing-medium;
margin-right: $spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-left: $spacing-small;
margin-right: $spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-left: $spacing-x-large;
margin-right: $spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-left: $spacing-x-small;
margin-right: $spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-left: $spacing-xx-large;
margin-right: $spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-left: $spacing-xx-small;
margin-right: $spacing-xx-small;
MarginSpacing
Adds .125rem margin to the side specified
margin-left: $spacing-xxx-small;
margin-right: $spacing-xxx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-large;
margin-right: $spacing-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-medium;
margin-right: $spacing-medium;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: 0 !important;
margin-right: 0 !important;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-small;
margin-right: $spacing-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-x-large;
margin-right: $spacing-x-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-x-small;
margin-right: $spacing-x-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-xx-large;
margin-right: $spacing-xx-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-xx-small;
margin-right: $spacing-xx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-xxx-small;
margin-right: $spacing-xxx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-left: $spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-left: $spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-left: $spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-left: $spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-left: $spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-left: $spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-left: $spacing-xx-small;
MarginSpacing
Adds .125rem margin to the side specified
margin-left: $spacing-xxx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-medium;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: 0 !important;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-x-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-x-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-xx-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-xx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-left: $spacing-xxx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-right: $spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-right: $spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-right: $spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-right: $spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-right: $spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-right: $spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-right: $spacing-xx-small;
MarginSpacing
Adds .125rem margin to the side specified
margin-right: $spacing-xxx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-medium;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: 0 !important;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-x-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-x-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-xx-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-xx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-right: $spacing-xxx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-top: $spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-top: $spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-top: $spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-top: $spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-top: $spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-top: $spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-top: $spacing-xx-small;
MarginSpacing
Adds .125rem margin to the side specified
margin-top: $spacing-xxx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-medium;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: 0 !important;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-x-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-x-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-xx-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-xx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-xxx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-top: $spacing-large;
margin-bottom: $spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-top: $spacing-medium;
margin-bottom: $spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-top: $spacing-small;
margin-bottom: $spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-top: $spacing-x-large;
margin-bottom: $spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-top: $spacing-x-small;
margin-bottom: $spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-top: $spacing-xx-large;
margin-bottom: $spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-top: $spacing-xx-small;
margin-bottom: $spacing-xx-small;
MarginSpacing
Adds .125rem margin to the side specified
margin-top: $spacing-xxx-small;
margin-bottom: $spacing-xxx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-large;
margin-bottom: $spacing-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-medium;
margin-bottom: $spacing-medium;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: 0 !important;
margin-bottom: 0 !important;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-small;
margin-bottom: $spacing-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-x-large;
margin-bottom: $spacing-x-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-x-small;
margin-bottom: $spacing-x-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-xx-large;
margin-bottom: $spacing-xx-large;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-xx-small;
margin-bottom: $spacing-xx-small;
MarginSpacing
Adjust whitespace with horizontal and vertical spacing helpers
margin-top: $spacing-xxx-small;
margin-bottom: $spacing-xxx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin: $var-spacing-large;
MarginSpacing
Adds 1rem margin to the side specified
margin: $var-spacing-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin: $var-spacing-small;
MarginSpacing
Adds 2rem margin to the side specified
margin: $var-spacing-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin: $var-spacing-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin: $var-spacing-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin: $var-spacing-xx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-bottom: $var-spacing-vertical-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-bottom: $var-spacing-vertical-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-bottom: $var-spacing-vertical-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-bottom: $var-spacing-vertical-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-bottom: $var-spacing-vertical-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-bottom: $var-spacing-vertical-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-bottom: $var-spacing-vertical-xx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-left: $var-spacing-horizontal-large;
margin-right: $var-spacing-horizontal-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-left: $var-spacing-horizontal-medium;
margin-right: $var-spacing-horizontal-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-left: $var-spacing-horizontal-small;
margin-right: $var-spacing-horizontal-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-left: $var-spacing-horizontal-x-large;
margin-right: $var-spacing-horizontal-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-left: $var-spacing-horizontal-x-small;
margin-right: $var-spacing-horizontal-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-left: $var-spacing-horizontal-xx-large;
margin-right: $var-spacing-horizontal-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-left: $var-spacing-horizontal-xx-small;
margin-right: $var-spacing-horizontal-xx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-left: $var-spacing-horizontal-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-left: $var-spacing-horizontal-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-left: $var-spacing-horizontal-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-left: $var-spacing-horizontal-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-left: $var-spacing-horizontal-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-left: $var-spacing-horizontal-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-left: $var-spacing-horizontal-xx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-right: $var-spacing-horizontal-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-right: $var-spacing-horizontal-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-right: $var-spacing-horizontal-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-right: $var-spacing-horizontal-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-right: $var-spacing-horizontal-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-right: $var-spacing-horizontal-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-right: $var-spacing-horizontal-xx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-top: $var-spacing-vertical-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-top: $var-spacing-vertical-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-top: $var-spacing-vertical-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-top: $var-spacing-vertical-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-top: $var-spacing-vertical-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-top: $var-spacing-vertical-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-top: $var-spacing-vertical-xx-small;
MarginSpacing
Adds 1.5rem margin to the side specified
margin-top: $var-spacing-vertical-large;
margin-bottom: $var-spacing-vertical-large;
MarginSpacing
Adds 1rem margin to the side specified
margin-top: $var-spacing-vertical-medium;
margin-bottom: $var-spacing-vertical-medium;
MarginSpacing
Adds .75rem margin to the side specified
margin-top: $var-spacing-vertical-small;
margin-bottom: $var-spacing-vertical-small;
MarginSpacing
Adds 2rem margin to the side specified
margin-top: $var-spacing-vertical-x-large;
margin-bottom: $var-spacing-vertical-x-large;
MarginSpacing
Adds .5rem margin to the side specified
margin-top: $var-spacing-vertical-x-small;
margin-bottom: $var-spacing-vertical-x-small;
MarginSpacing
Adds 3rem margin to the side specified
margin-top: $var-spacing-vertical-xx-large;
margin-bottom: $var-spacing-vertical-xx-large;
MarginSpacing
Adds .25rem margin to the side specified
margin-top: $var-spacing-vertical-xx-small;
margin-bottom: $var-spacing-vertical-xx-small;
Media ObjectsGeneric
Generic Preview
Defines the body area
TODO: Watch this - overreaching?
margin-bottom: 0;
Media ObjectsSpacing
Defines the figure area
flex-shrink: 0;
margin-right: $spacing-small;
Media ObjectsSizing
min-width: $square-icon-large-boundary;
Media ObjectsSpacing
Defines the figure area on the other side
margin: 0 0 0 $spacing-small;
Media ObjectsSpacing
margin: 0 0 0 $spacing-small;
Media ObjectsLayout
Aligns the content in the .slds-media__body to the middle of the .slds-media__figure
align-items: center;
Media ObjectsLayout
align-items: center;
Media ObjectsLayout
flex-shrink: 0;
flex-basis: auto;
Name Value ListSizing
Label of the name-value pair variant. Layout is modified by its parent class.
min-width: 0;
Name Value ListLayout
Label of the name-value pair variant. Layout is modified by its parent class.
display: block;
Name Value ListSpacing
min-width: 0;
Name Value ListSpacing
display: block;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding: $spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding: $spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding: $spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding: $spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding: $spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding: $spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding: $spacing-xx-small;
PaddingSpacing
Adds .125rem padding to the side specified
padding: $spacing-xxx-small;
PaddingSpacing
padding: $spacing-large;
PaddingSpacing
padding: $spacing-medium;
PaddingSpacing
padding: 0 !important;
PaddingSpacing
padding: $spacing-small;
PaddingSpacing
padding: $spacing-x-large;
PaddingSpacing
padding: $spacing-x-small;
PaddingSpacing
padding: $spacing-xx-large;
PaddingSpacing
padding: $spacing-xx-small;
PaddingSpacing
padding: $spacing-xxx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-bottom: $spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-bottom: $spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-bottom: $spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-bottom: $spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-bottom: $spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-bottom: $spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-bottom: $spacing-xx-small;
PaddingSpacing
Adds .125rem padding to the side specified
padding-bottom: $spacing-xxx-small;
PaddingSpacing
padding-bottom: $spacing-large;
PaddingSpacing
padding-bottom: $spacing-medium;
PaddingSpacing
padding-bottom: 0 !important;
PaddingSpacing
padding-bottom: $spacing-small;
PaddingSpacing
padding-bottom: $spacing-x-large;
PaddingSpacing
padding-bottom: $spacing-x-small;
PaddingSpacing
padding-bottom: $spacing-xx-large;
PaddingSpacing
padding-bottom: $spacing-xx-small;
PaddingSpacing
padding-bottom: $spacing-xxx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-left: $spacing-large;
padding-right: $spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-left: $spacing-medium;
padding-right: $spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-left: $spacing-small;
padding-right: $spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-left: $spacing-x-large;
padding-right: $spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-left: $spacing-x-small;
padding-right: $spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-left: $spacing-xx-large;
padding-right: $spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-left: $spacing-xx-small;
padding-right: $spacing-xx-small;
PaddingSpacing
Adds .125rem padding to the side specified
padding-left: $spacing-xxx-small;
padding-right: $spacing-xxx-small;
PaddingSpacing
padding-left: $spacing-large;
padding-right: $spacing-large;
PaddingSpacing
padding-left: $spacing-medium;
padding-right: $spacing-medium;
PaddingSpacing
padding-left: 0 !important;
padding-right: 0 !important;
PaddingSpacing
padding-left: $spacing-small;
padding-right: $spacing-small;
PaddingSpacing
padding-left: $spacing-x-large;
padding-right: $spacing-x-large;
PaddingSpacing
padding-left: $spacing-x-small;
padding-right: $spacing-x-small;
PaddingSpacing
padding-left: $spacing-xx-large;
padding-right: $spacing-xx-large;
PaddingSpacing
padding-left: $spacing-xx-small;
padding-right: $spacing-xx-small;
PaddingSpacing
padding-left: $spacing-xxx-small;
padding-right: $spacing-xxx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-left: $spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-left: $spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-left: $spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-left: $spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-left: $spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-left: $spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-left: $spacing-xx-small;
PaddingSpacing
Adds .125rem padding to the side specified
padding-left: $spacing-xxx-small;
PaddingSpacing
padding-left: $spacing-large;
PaddingSpacing
padding-left: $spacing-medium;
PaddingSpacing
padding-left: 0 !important;
PaddingSpacing
padding-left: $spacing-small;
PaddingSpacing
padding-left: $spacing-x-large;
PaddingSpacing
padding-left: $spacing-x-small;
PaddingSpacing
padding-left: $spacing-xx-large;
PaddingSpacing
padding-left: $spacing-xx-small;
PaddingSpacing
padding-left: $spacing-xxx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-right: $spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-right: $spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-right: $spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-right: $spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-right: $spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-right: $spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-right: $spacing-xx-small;
PaddingSpacing
Adds .125rem padding to the side specified
padding-right: $spacing-xxx-small;
PaddingSpacing
padding-right: $spacing-large;
PaddingSpacing
padding-right: $spacing-medium;
PaddingSpacing
padding-right: 0 !important;
PaddingSpacing
padding-right: $spacing-small;
PaddingSpacing
padding-right: $spacing-x-large;
PaddingSpacing
padding-right: $spacing-x-small;
PaddingSpacing
padding-right: $spacing-xx-large;
PaddingSpacing
padding-right: $spacing-xx-small;
PaddingSpacing
padding-right: $spacing-xxx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-top: $spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-top: $spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-top: $spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-top: $spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-top: $spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-top: $spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-top: $spacing-xx-small;
PaddingSpacing
Adds .125rem padding to the side specified
padding-top: $spacing-xxx-small;
PaddingSpacing
padding-top: $spacing-large;
PaddingSpacing
padding-top: $spacing-medium;
PaddingSpacing
padding-top: 0 !important;
PaddingSpacing
padding-top: $spacing-small;
PaddingSpacing
padding-top: $spacing-x-large;
PaddingSpacing
padding-top: $spacing-x-small;
PaddingSpacing
padding-top: $spacing-xx-large;
PaddingSpacing
padding-top: $spacing-xx-small;
PaddingSpacing
padding-top: $spacing-xxx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-top: $spacing-large;
padding-bottom: $spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-top: $spacing-medium;
padding-bottom: $spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-top: $spacing-small;
padding-bottom: $spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-top: $spacing-x-large;
padding-bottom: $spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-top: $spacing-x-small;
padding-bottom: $spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-top: $spacing-xx-large;
padding-bottom: $spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-top: $spacing-xx-small;
padding-bottom: $spacing-xx-small;
PaddingSpacing
Adds .125rem padding to the side specified
padding-top: $spacing-xxx-small;
padding-bottom: $spacing-xxx-small;
PaddingSpacing
padding-top: $spacing-large;
padding-bottom: $spacing-large;
PaddingSpacing
padding-top: $spacing-medium;
padding-bottom: $spacing-medium;
PaddingSpacing
padding-top: 0 !important;
padding-bottom: 0 !important;
PaddingSpacing
padding-top: $spacing-small;
padding-bottom: $spacing-small;
PaddingSpacing
padding-top: $spacing-x-large;
padding-bottom: $spacing-x-large;
PaddingSpacing
padding-top: $spacing-x-small;
padding-bottom: $spacing-x-small;
PaddingSpacing
padding-top: $spacing-xx-large;
padding-bottom: $spacing-xx-large;
PaddingSpacing
padding-top: $spacing-xx-small;
padding-bottom: $spacing-xx-small;
PaddingSpacing
padding-top: $spacing-xxx-small;
padding-bottom: $spacing-xxx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding: $var-spacing-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding: $var-spacing-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding: $var-spacing-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding: $var-spacing-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding: $var-spacing-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding: $var-spacing-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding: $var-spacing-xx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-bottom: $var-spacing-vertical-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-bottom: $var-spacing-vertical-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-bottom: $var-spacing-vertical-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-bottom: $var-spacing-vertical-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-bottom: $var-spacing-vertical-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-bottom: $var-spacing-vertical-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-bottom: $var-spacing-vertical-xx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-left: $var-spacing-horizontal-large;
padding-right: $var-spacing-horizontal-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-left: $var-spacing-horizontal-medium;
padding-right: $var-spacing-horizontal-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-left: $var-spacing-horizontal-small;
padding-right: $var-spacing-horizontal-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-left: $var-spacing-horizontal-x-large;
padding-right: $var-spacing-horizontal-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-left: $var-spacing-horizontal-x-small;
padding-right: $var-spacing-horizontal-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-left: $var-spacing-horizontal-xx-large;
padding-right: $var-spacing-horizontal-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-left: $var-spacing-horizontal-xx-small;
padding-right: $var-spacing-horizontal-xx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-left: $var-spacing-horizontal-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-left: $var-spacing-horizontal-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-left: $var-spacing-horizontal-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-left: $var-spacing-horizontal-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-left: $var-spacing-horizontal-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-left: $var-spacing-horizontal-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-left: $var-spacing-horizontal-xx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-right: $var-spacing-horizontal-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-right: $var-spacing-horizontal-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-right: $var-spacing-horizontal-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-right: $var-spacing-horizontal-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-right: $var-spacing-horizontal-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-right: $var-spacing-horizontal-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-right: $var-spacing-horizontal-xx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-top: $var-spacing-vertical-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-top: $var-spacing-vertical-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-top: $var-spacing-vertical-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-top: $var-spacing-vertical-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-top: $var-spacing-vertical-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-top: $var-spacing-vertical-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-top: $var-spacing-vertical-xx-small;
PaddingSpacing
Adds 1.5rem padding to the side specified
padding-top: $var-spacing-vertical-large;
padding-bottom: $var-spacing-vertical-large;
PaddingSpacing
Adds 1rem padding to the side specified
padding-top: $var-spacing-vertical-medium;
padding-bottom: $var-spacing-vertical-medium;
PaddingSpacing
Adds .75rem padding to the side specified
padding-top: $var-spacing-vertical-small;
padding-bottom: $var-spacing-vertical-small;
PaddingSpacing
Adds 2rem padding to the side specified
padding-top: $var-spacing-vertical-x-large;
padding-bottom: $var-spacing-vertical-x-large;
PaddingSpacing
Adds .5rem padding to the side specified
padding-top: $var-spacing-vertical-x-small;
padding-bottom: $var-spacing-vertical-x-small;
PaddingSpacing
Adds 3rem padding to the side specified
padding-top: $var-spacing-vertical-xx-large;
padding-bottom: $var-spacing-vertical-xx-large;
PaddingSpacing
Adds .25rem padding to the side specified
padding-top: $var-spacing-vertical-xx-small;
padding-bottom: $var-spacing-vertical-xx-small;
PositionLayout
Used to position an element relative to its closest ancestor with relative positioning.
position: absolute;
PositionLayout
Used to position an element relative to the viewport.
position: fixed;
PositionLayout
Used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout.
position: relative;
PrintLayout
Hides an element only when printing.
display: none;
ScrollableLayout
Forces overflow items to not scroll within element's width and height
overflow: hidden;
ScrollableSizing
Forces element to scroll horizontally when content exceeds element's width
max-width: 100%;
overflow: hidden;
overflow-x: auto;
ScrollableSizing
Forces element to scroll vertically when content exceeds element's height
max-height: 100%;
overflow: hidden;
overflow-y: auto;
ScrollableLayout
overflow: hidden;
ScrollableSizing
max-width: 100%;
overflow: hidden;
overflow-x: auto;
ScrollableSizing
max-height: 100%;
overflow: hidden;
overflow-y: auto;
SizingSizing
width: 100%;
TextTypography
SLDS utility class preview text
Resets line-height to browser default
line-height: $line-height-reset;
TextTypography
SLDS utility class preview text
line-height: $line-height-reset;
TextTypography
SLDS utility class preview text
Aligns text center
text-align: center;
TextTypography
SLDS utility class preview text
Aligns text left
text-align: left;
TextTypography
SLDS utility class preview text
Aligns text right
text-align: right;
TextTypography
SLDS utility class preview text
text-align: center;
TextTypography
SLDS utility class preview text
text-align: left;
TextTypography
SLDS utility class preview text
text-align: right;
TextTypography
SLDS utility class preview text
Creates 12px regular body text
font-size: $font-size-2;
TextTypography
SLDS utility class preview text
font-size: $font-size-3;
TextTypography
SLDS utility class preview text
font-size: $font-size-2;
TextTypography
SLDS utility class preview text
Monospace font family
font-family: $font-family-monospace;
TextTypography
SLDS utility class preview text
font-weight: $font-weight-regular;
TextTypography
SLDS utility class preview text
declarations unavailable
TextTypography
SLDS utility class preview text
Very large 28px heading
font-size: $font-size-9;
line-height: $line-height-heading;
TextTypography
SLDS utility class preview text
Large 20px heading
font-size: $font-size-7;
line-height: $line-height-heading;
TextTypography
SLDS utility class preview text
Smaller 16px heading
font-size: $font-size-5;
line-height: $line-height-heading;
TextTypography
SLDS utility class preview text
font-weight: $font-weight-regular;
TextTypography
SLDS utility class preview text
declarations unavailable
TextTypography
SLDS utility class preview text
font-size: $font-size-9;
line-height: $line-height-heading;
TextTypography
SLDS utility class preview text
font-size: $font-size-7;
line-height: $line-height-heading;
TextTypography
SLDS utility class preview text
font-size: $font-size-5;
line-height: $line-height-heading;
TextTypography
SLDS utility class preview text
12px heading that is not all caps
declarations unavailable
TextTypography
SLDS utility class preview text
Bold 14px heading
font-size: $font-size-4;
font-weight: $font-weight-bold;
TextTypography
SLDS utility class preview text
All caps 12px heading
font-weight: $font-weight-regular;
text-transform: uppercase;
letter-spacing: 0.0625rem;
TextTypography
SLDS utility class preview text
font-weight: $font-weight-regular;
text-transform: uppercase;
letter-spacing: 0.0625rem;
ThemesTypography
SLDS utility class preview text
Adds striped background
declarations unavailable
ThemesGeneric
Generic Preview
Sets the background color to white
declarations unavailable
ThemesColor
Color
Sets the background color to black
background-color: var(--slds-g-color-neutral-base-30, #444);
ThemesGeneric
Generic Preview
Sets the background color to gray
declarations unavailable
ThemesTypography
SLDS utility class preview text
declarations unavailable
ThemesGeneric
Generic Preview
declarations unavailable
ThemesTypography
SLDS utility class preview text
declarations unavailable
ThemesColor
Color
background-color: var(--slds-g-color-neutral-base-30, #444);
ThemesGeneric
Generic Preview
declarations unavailable
TruncationSizing
Truncates text at 25% of its parent container
max-width: 25%;
TruncationSizing
Truncates text at 33% of its parent container
max-width: 33%;
TruncationSizing
Truncates text at 50% of its parent container
max-width: 50%;
TruncationSizing
Truncates text at 66% of its parent container
max-width: 66%;
TruncationSizing
Truncates text at 75% of its parent container
max-width: 75%;
TruncationSizing
max-width: 25%;
TruncationSizing
max-width: 33%;
TruncationSizing
max-width: 50%;
TruncationSizing
max-width: 66%;
TruncationSizing
max-width: 75%;
Vertical ListSpacing
Provides styles for a nested lists
margin-left: $spacing-medium;
Vertical ListGeneric
Generic Preview
Creates an unordered list with markers
declarations unavailable
Vertical ListGeneric
Generic Preview
Creates an ordered list with decimals
declarations unavailable
Vertical ListGeneric
Generic Preview
declarations unavailable
Vertical ListGeneric
Generic Preview
declarations unavailable
VisibilityLayout
Hides an element from the page by setting the visibility property to `hidden`
visibility: hidden !important;
VisibilityLayout
Hides an element from the page by setting display propery to `none`
display: none !important;
VisibilitySizing
Hides elements inside a parent
height: 0;
overflow: hidden;
VisibilitySizing
Shows the elements inside the parent
height: auto;
overflow: visible;
VisibilitySizing
Hides element and removes width
visibility: hidden !important;
width: 0;
VisibilityLayout
Shows the element by setting display property to `block`
display: block;
VisibilityLayout
Shows the element by setting display to `inline`
display: inline;
VisibilityLayout
Shows the element by setting display to `inline-block`
display: inline-block;
VisibilityLayout
display: inline;
VisibilityLayout
display: inline-block;
VisibilityGeneric
Generic Preview
opacity: 0;
VisibilityGeneric
Generic Preview
opacity: 1;
VisibilityLayout
Shows the element by setting the visibility property to `visible`
visibility: visible;