Padding
Padding utility classes:
| CSS Class | Description |
|---|---|
p{p}adding-4xs |
padding: var(--space-4xs); |
p{p}adding-3xs |
padding: var(--space-3xs); |
p{p}adding-2xs |
padding: var(--space-2xs); |
p{p}adding-xs |
padding: var(--space-xs); |
p{p}adding-sm |
padding: var(--space-sm); |
p{p}adding-md |
padding: var(--space-md); |
p{p}adding-lg |
padding: var(--space-lg); |
p{p}adding-xl |
padding: var(--space-xl); |
p{p}adding-2xl |
padding: var(--space-2xl); |
p{p}adding-3xl |
padding: var(--space-3xl); |
p{p}adding-4xl |
padding: var(--space-4xl); |
p{p}adding-0 |
padding: 0; |
The padding values (--space-{value}) depends on the spacing scale.
Target a specific side using .padding-{side}-{size}:
| CSS Class | Description |
|---|---|
p{p}adding-top-sm |
padding-top: var(--space-sm); |
p{p}adding-bottom-xl |
padding-bottom: var(--space-xl); |
p{p}adding-right-xs |
padding-right: var(--space-xs); |
Target left and right using .padding-x-{size}:
| CSS Class | Description |
|---|---|
p{p}adding-x-sm |
padding-left: var(--space-sm); padding-right: var(--space-sm); |
Target top and bottom using .padding-y-{size}:
| CSS Class | Description |
|---|---|
p{p}adding-y-xs |
padding-top: var(--space-xs); padding-bottom: var(--space-xs); |
Responsive #
Edit the padding utility classes at specific breakpoints adding the @{breakpoint} suffix.
Example:
<div class="padding-left-0@md"><!-- content --></div>
