36k+
Satisfied customers
LAYOUT
Box
Box is an advanced neutral layer primitive for media stages, portable positioned overlays, and fixed viewport content.
Start normal page composition with Section, Grid, Flex, Card, media, and controls. Add Box only when those owners cannot express the required layer geometry.
FOREGROUND INHERITANCE
Set the content color once
Box passes color to descendant text and current-color artwork. A child color remains a deliberate local override on web, Android, and iOS.
Box bg:"softInfo" color:"softInfoText" p:5 rounded:"lg"
Title size:"xl"
"Inherited title"
Text size:"sm"
"This copy uses softInfoText."
Text size:"sm" color:"danger"
"This child overrides the parent."Inherited title
This copy uses softInfoText.
This child overrides the parent.
RELATIVE + ABSOLUTE
Layer real components over a visual stage
A relative Box stays in normal flow and becomes the reference plane for direct absolute Box children.
36k+
Satisfied customers
Box position:"relative" cover:"/assets/hero.jpg" minH:"vh-32" rounded:"xl"
Box position:"absolute" top:{ xs:4 md:6 } right:{ xs:4 md:6 }
Card p:4
Text weight:"bold"
"Audience proof"
Box position:"absolute" bottom:{ xs:4 md:6 } left:{ xs:4 md:6 }
Chip variant:"soft" scheme:"info"
"Real-time analytics"FIXED
Anchor content to the safe viewport
Fixed Boxes leave document flow and remain outside the route scroll area. Use them for persistent actions, not ordinary section content.
Box position:"fixed" right:4 bottom:4
Card p:4 shadow:"lg"
Text weight:"bold"
"Persistent action"Direct ownership
An absolute Box must be a direct child of a relative Box.
One edge per axis
Choose top or bottom, and left or right. Opposite offsets on one axis are rejected.
Source-order layers
Later positioned siblings appear above earlier siblings on every target.
API
Position props
Position is static. Offsets use the Dowe spacing scale and can vary by breakpoint. Box also accepts its documented common style, cover, overlay, visibility, and animation props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||