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.

dowe
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

Real-time analytics
dowe
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.

dowe
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 data

There are no records to display