Spacing, gaps & radius¶
Flexoraa uses named spacing tokens so sections and elements stay consistent. Modules expose these by name (for example top-l, sb-l, gap-m).
Section spacing (vertical)¶
Applied as top and bottom padding on a section. Values are responsive; desktop is shown.
| Token | Desktop | Class |
|---|---|---|
| S | 40px | top-s / bottom-s |
| M | 60px | top-m / bottom-m |
| L | 80px | top-l / bottom-l |
| XL | 100px | top-xl / bottom-xl |
| 2XL | 120px | top-2xl / bottom-2xl |
| 3XL | 140px | top-3xl / bottom-3xl |
| 4XL | 160px | top-4xl / bottom-4xl |
Horizontal spacing offers M (20px), L (40px), and XL (60px).
Spacing under elements¶
Bottom spacing under a title, description, or other element.
| Token | Value |
|---|---|
sb-0 | 0px |
sb-s | 4px |
sb-m | 8px |
sb-l | 16px |
sb-xl | 24px |
sb-2xl | 32px |
sb-3xl | 48px |
sb-4xl | 64px |
Gaps¶
Space between items in a row or grid.
| Token | Value |
|---|---|
gap-xs | 2px |
gap-s | 4px |
gap-m | 8px |
gap-l | 12px |
gap-xl | 16px |
gap-2xl | 20px |
gap-3xl | 24px |
gap-4xl | 28px |
Corner radius¶
| Token | Value |
|---|---|
round-0 | 0px |
round-s | 4px |
round-m | 8px |
round-l | 12px |
round-xl | 16px |
round-xxl | 20px |
round-100 | Circle |
Content width¶
The maximum content width is 1240px by default, set in Theme Settings.