Dowe

LAYOUT

Footer

Footers close a page with balanced regions for identity, navigation, and supporting actions.

PLAYGROUND

A complete product footer

Use start for identity, center for the main link group, and end for a compact action. boxed:true keeps the Footer surface full width while centering those regions at 96rem on web or 1536 logical units on Android and iOS.

Footer variant:"soft" scheme:"surface" bordered:true boxed:true
  start
    Text weight:"bold"
      "Dowe Studio"
  center
    Button href:"/docs/views" variant:"ghost" scheme:"muted" size:"sm"
      "Views"
    Button href:"/docs/server" variant:"ghost" scheme:"muted" size:"sm"
      "Server"
  end
    Button href:"/docs/views/control/button" variant:"soft" scheme:"primary" size:"sm"
      "Explore components"

REGIONS

Three places, one horizontal contract

A region can hold text, buttons, links, or a nested Flex. Missing regions do not reserve artificial space.

START

Identity

Use the leading region for a brand, project name, or ownership label.

CENTER

Navigation

The center region takes flexible space when start or end content is present.

END

Action

Keep one conversion, support, or account action close to the trailing edge.

VISUAL SYSTEM

Surface, contrast, and containment

variant controls the surface treatment, scheme chooses the design family, and bordered, blurred, and boxed refine the shell without changing its regions.

Footer variant:"solid" scheme:"surface" bordered:true
  start
    Text
      "Solid surface"

Footer variant:"soft" scheme:"info" blurred:true
  start
    Text
      "Soft blurred"

Footer variant:"outlined" scheme:"success" bordered:true boxed:true
  start
    Text
      "Outlined boxed"

ADVANCED COMPOSITION

A footer that scales with the product

Keep the outer contract small and compose richer groups inside each region. This pattern works for a product shell, documentation portal, or account area.

Footer variant:"soft" scheme:"background" bordered:true boxed:true
  start
    Grid columns:1 gap:2
      Text weight:"bold"
        "Northstar"
      Text size:"sm" color:"muted"
        "Systems for teams that ship."
  center
    Flex wrap:true gap:5
      Button href:"/docs/views/layout/appbar" variant:"ghost" scheme:"muted" size:"sm"
        "Platform"
      Button href:"/docs/views/overlay/command" variant:"ghost" scheme:"muted" size:"sm"
        "Shortcuts"
  end
    Button href:"/docs/views" variant:"solid" scheme:"primary" size:"sm"
      "Read the docs"

API

Props

Footer also accepts applicable common spacing, sizing, typography, visibility, border, radius, and accessibility props.

Prop	Type	Default
No data There are no records to display

No data