Ready
Added in 2.0.0
A collection of utility classes to add spacing between elements and their content.
Usage
To apply this component, add one of the following classes to a block element.
Class | Description |
---|---|
.gls-padding |
Adds default padding to the element. |
.gls-padding-small |
Adds small padding to the element. |
.gls-padding-large |
Adds large padding to the element. |
<div class="gls-padding"></div>
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="gls-padding gls-background-muted gls-width-1-2@s"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
Remove padding
In some cases you want to remove padding from an element, rather than adding it. To do so, apply one of the following classes.
Class | Description |
---|---|
.gls-padding-remove |
Removes all padding from an element. |
.gls-padding-remove-top |
Removes top padding from an element. |
.gls-padding-remove-bottom |
Removes bottom padding from an element. |
.gls-padding-remove-left |
Removes left padding from an element. |
.gls-padding-remove-right |
Removes right padding from an element. |
.gls-padding-remove-vertical |
Removes top and bottom padding from an element. |
.gls-padding-remove-horizontal |
Removes left and right padding from an element. |