🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


Padding utility classes (based on the spacing variables):

Class Description
.padding-xxxxs padding: var(--space-xxxxs);
.padding-xxxs padding: var(--space-xxxs);
.padding-xxs padding: var(--space-xxs);
.padding-xs padding: var(--space-xs);
.padding-sm padding: var(--space-sm);
.padding-md padding: var(--space-md);
.padding-lg padding: var(--space-lg);
.padding-xl padding: var(--space-xl);
.padding-xxl padding: var(--space-xxl);
.padding-xxxl padding: var(--space-xxxl);
.padding-xxxxl padding: var(--space-xxxxl);
.padding-component padding: var(--component-padding);
.padding-0 padding: 0;

Target a specific side using .padding-{side}-{size}:

Class Description
.padding-top-sm padding-top: var(--space-sm);
.padding-bottom-xl padding-bottom: var(--space-xl);
.padding-right-xs padding-right: var(--space-xs);
.padding-left-component padding-left: var(--component-padding);

Target left and right using .padding-x-{size}:

Class Description
.padding-x-sm padding-left: var(--space-sm); padding-right: var(--space-sm);

Target top and bottom using .padding-y-{size}:

Class Description
.padding-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).


<div class="[email protected]"><!-- content --></div>

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us