Layout primitives
Small native `.asx` layout building blocks for pages, dashboards, docs, and CMS screens.
These primitives keep common layout work in `axonyx-ui` instead of forcing every app to write raw divs.
Box + Inset
Box gives you a neutral wrapper. Inset controls internal spacing.
Use this for custom surfaces before creating a higher-level component.
Flex
Column layouts stay explicit.
The same primitive can collapse on small screens later.
Center
Centered empty, loading, and onboarding states.
Header / Main / Sidebar / Footer
Main content keeps its own semantic element.
Responsive Grid
Use `min` when you want cards to auto-fit without deciding exact column counts for every viewport.
Auto card
min md
Auto card
min md
Auto card
min md
Bleed
Bleed lets a visual band escape the container while the rest of the page stays readable.
layout
Full-bleed Foundry band
This is useful for marketing bands, docs callouts, or CMS hero sections.
Layout API
- Box: padding, surface
- Flex: direction, gap, align, justify, wrap, collapse
- Container: max, padding, fluid
- Grid: cols, gap, align, min
- Center: min
- Spacer: size
- Header/Main/Sidebar/Footer: semantic layout wrappers
- Inset: size
- Bleed: padding