Loading…

Footer Simple

Block

A site footer with the brand and social links beside three columns of links.

Footers
0 components
1 file

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add footer-simple

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { DEFAULT } from "@/components/blocks/footer-simple"; export default function Page() {  return <DEFAULT />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<FooterSimpleBlock>

Prop	Type	Default
`brand` The brand: a name or a logo.	`ReactNode`	`"Acme"`
`copyright`	`ReactNode`	`"© Acme. All rights reserved."`
`description`	`ReactNode`	`"Build beautiful interfaces, effortlessly."`
`groups`	`FooterLinkGroup[]`	`DEFAULT_FOOTER_SIMPLE_GROUPS`
`headingLevel` Level of each link group's heading.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`navLabel` Accessible name of the link navigation.	`string`	`"Footer"`
`social`	`FooterSocialLink[]`	`DEFAULT_FOOTER_SIMPLE_SOCIAL`
`socialLabel` Accessible name of the social links list.	`string`	`"Social links"`

Plus every attribute of <footer>.

Accessibility

A footer landmark whose link columns sit in a named nav, each column titled by a heading whose level is configurable. Social links are a named list and always carry their name as text — visually hidden when an icon is shown — and external ones say they open a new tab. The entrance only hides a footer that starts below the fold, and never under reduced motion.