Skip to content
Aback UI

Block · Marketing

Site footer

Brand column, link columns, and a legal bar that collapse cleanly from four columns to one.

Beta0 componentsRegistry JSON (opens in a new tab)
the Site footer preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add site-footer

The block lands at components/blocks/site-footer.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

    What to customize

    • Each column is a navigation landmark named by its title. Keep column titles short and distinct.
    • Mark links to other sites external: they open in a new tab with noopener, show an arrow, and say so to screen readers.
    • Put legal links such as privacy and terms in legal, not in a column, so they stay in the bottom bar on every page.

    Accessibility

    • The footer element is the page's contentinfo landmark. Render one per page.
    • External links announce "opens in a new tab" instead of surprising the visitor.
    • Links meet the 12px text floor and keep a visible focus ring on the muted background.