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>