Features - Section Designer
Utilities Padding
Our padding
-micro-classes works with the breakpoints defined in layout.props.css
.
A micro-class is a mix of a breakpoint, a padding-type and a value:
Breakpoint
Key | Size |
---|---|
xs | 360px |
sm | 480px |
md | 768px |
lg | 1024px |
xl | 1440px |
xxl | 1920px |
Padding Type
Key | Description |
---|---|
-p | padding |
-pb- | padding-block |
-pi- | padding-inline |
-pbe- | padding-block-end |
-pbs- | padding-block-start |
-pie- | padding-inline-end |
-pis- | padding-inline-start |
Numeric value
From 0 to 8
Example:
A class with sm-pb-2
will set padding-block
to 2 (multiplying the padding-const defined in --section-padding-unit
) between breakpoints xs
and md
.
You can thus change padding-values for different breakpoints:
<div class="sm-pb-2 md-pb-1 xl-pb-0"></div>