Skip to main content

Page Footer

Page bottom chrome: simple/minimal bar in dashboard main, columns+brand for marketing (Scrawl). Docs use ~80rem frames and App Shell context.

Where footers live

  • Dashboard — variant=simple or minimal at the bottom of the main column (often with mt-auto).
  • Marketing / legal — variant=columns full viewport width (Scrawl landing).
  • Previews use 90% width and 90vh height per variant on layout doc pages so column grids and App Shell footers read at real scale.

atelier — in App Shell (dashboard simple bar)

Footer at the bottom of the scrollable main column — Lyriq-style legal links.

Settings

Page content fills the middle; footer sticks to the bottom of main.

variant=simple — main column width

Content above…

variant=columns — marketing page (Scrawl)

Full-bleed footer below landing content — not nested in App Shell main padding.

Build with Atelier.

Marketing pages use variant=columns footers at full viewport width — not inside the dashboard main column.

Brand + menu + social icons

Three link columns

PageFooterCredit (attribution row)

variant=minimal

Compact apps and modals.

Custom children (freeform)

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
variantOptional"simple" | "columns" | "minimal"simpleShell layout density.
PageFooterBrandOptionalsubcomponent—Logo mark + title link + optional tagline.
PageFooterColumn / PageFooterLinkOptionalsubcomponents—Grouped footer nav columns.
PageFooterMenuOptionalsubcomponent—Horizontal link row from items array.
PageFooterBar / PageFooterCopyrightOptionalsubcomponents—Bottom row; bar supports fade Divider.
PageFooterCreditOptionalsubcomponent—Optional “Made with ♥ by …” attribution link for the bar row.
childrenOptionalReactNode—Compose grid, columns, or freeform content.