Padding - v3
Padding utility classes in CodyFrame v3 (based on the spacing variables):
| CSS Class | Description |
|---|---|
p{p}adding-xxxxs |
padding: var(--space-xxxxs); |
p{p}adding-xxxs |
padding: var(--space-xxxs); |
p{p}adding-xxs |
padding: var(--space-xxs); |
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-xxl |
padding: var(--space-xxl); |
p{p}adding-xxxl |
padding: var(--space-xxxl); |
p{p}adding-xxxxl |
padding: var(--space-xxxxl); |
p{p}adding-component |
padding: var(--component-padding); |
p{p}adding-0 |
padding: 0; |
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); |
p{p}adding-left-component |
padding-left: var(--component-padding); |
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 (@xs, @sm, @md, @lg, @xl).
Example:
<div class="padding-left-0@md"><!-- content --></div>
