Dowe Views Documentation

LAYOUT

Footer

Footers close a page with top and bottom bands around a balanced start, center, and end row inside one shared inner container.

PLAYGROUND

A complete product footer

Use top and bottom for responsive bands, then keep identity, navigation, and actions in the start, center, and end row. Footer includes horizontal spacing 4 on small viewports and 6 from md, a more pronounced top spacing of 10 and 16, and bottom spacing of 4 and 6. boxed:true constrains top, the central row, and bottom together while keeping the outer surface full width. Override spacing with p, px, py, pl, pr, pt, or pb when the composition needs a different rhythm.

Footer variant:"soft" bordered:true boxed:true
  top
    Text size:"xs" color:"muted" show:{ xs:true md:false }
      "Build once. Ship every target."
  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" size:"sm"
      "Explore components"
  bottom
    Text size:"xs" color:"muted"
      "© 2026 Dowe Studio"

REGIONS

Five regions, one responsive contract

top and bottom span the shared inner container around the central start, center, and end row. A missing region reserves no artificial space.

TOP

Opening band

Place a directory, announcement, or mobile-only identity above the row.

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.

BOTTOM

Closing band

Place legal copy, social links, or mobile-only actions below the row.

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 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
  top
    Text size:"xs" color:"muted" show:{ xs:true md:false }
      "Northstar product directory"
  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" size:"sm"
      "Read the docs"
  bottom
    Text size:"xs" color:"muted"
      "© 2026 Northstar Labs"

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