Dowe

LAYOUT

Section

Section creates semantic page bands with responsive content spacing, optional boxed content, and portable visual layers.

MENTAL MODEL

One band, one generated content body

Dowe keeps backgrounds and covers on the outer semantic band while placing children in an internal content body with responsive padding. boxed:true centers and limits only that body.

Section id:"product-overview" background:"soft" boxed:true
  Grid columns:1 gap:3
    Title size:"3xl"
      "A semantic product band"
    Text color:"muted"
      "Children receive responsive section spacing by default."

BOXED CONTENT

Full-width band. Focused body.

The outer Section keeps its background, cover, overlay, border, and anchor across the available width. Its generated body is centered and capped at 96rem on web or 1536 logical units on Android and iOS.

Section background:"aurora" boxed:true py:{ xs:8 md:12 }
  Grid columns:1 gap:3
    Title size:"4xl"
      "Focused content over a full-width band"
    Text color:"muted"
      "Padding stays inside the boxed content width."

BACKGROUND PRESETS

Portable decorative bands

Presets are theme-aware Dowe values generated consistently for web, Android, and iOS.

Soft

Neutral documentation and content.

Aurora

Launch and hero content.

Sunrise

Warm calls to action.

Ocean

Product and platform stories.

Meadow

Growth and success states.

Slate

Quiet technical separators.

COVER AND OVERLAY

Readable content over imagery

cover owns the base image and overlay adds contrast. background and cover are mutually exclusive, and overlay requires cover.

COVER SECTION

Visual layers stay outside the content body

The generated overlay keeps foreground content readable across targets.

Section cover:"assets/forest.webp" overlay:0.62 rounded:"md" minH:64
  Flex direction:"column" justify:"center" gap:3 minH:52
    Title size:"4xl"
      "Readable content over a cover image"

RESPONSIVE SPACING

Comfortable by default, explicit when needed

Without spacing props, content uses p:{ xs:4 md:6 }. Explicit props replace only their declared scope while unspecified sides retain the implicit default.

Section
  Text
    "Uses the responsive default."

Section px:{ xs:5 md:10 } py:8
  Text
    "Uses explicit horizontal and vertical spacing."

ANCHORS AND GRID

Page navigation and structural placement

A unique id registers a route section anchor. colSpan and rowSpan are valid only when Section is a direct child of Grid.

Grid columns:{ xs:1 md:3 } gap:4
  Section id:"featured" colSpan:{ xs:1 md:2 } background:"aurora"
    Title size:"2xl"
      "Featured area"
  Section background:"soft"
    Text
      "Supporting area"

API

Props

Section also accepts font, foreground and background colors, sizing, radius, border, and applicable common container props.

Prop	Type	Default
No data There are no records to display

No data