Spacing, gaps & radius¶
Global settings
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.
Every one of these fields offers Default as its first option, and that is what they ship set to. Default means "follow the theme", so the element takes its spacing from Theme Settings › Typography:
| Element | Theme field | Value |
|---|---|---|
| Headings | Spacing under headings | 16px (sb-l) |
| Description and body | Spacing under description | 24px (sb-xl) |
Change those two and the rhythm updates everywhere at once. Pick a specific size on a field only when that one element needs to differ. The sizes below are the CSS classes the choice produces, not the values you select: the editor shows Default, 0, S, M, L, XL, 2XL, 3XL, 4XL.
| 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.