Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Editorial Standards Footer Block for React

A newsroom footer with four section columns and a standards band for corrections, ownership and the ethics policy.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A newsroom footer for React with Base UI, for The Ravenhill Dispatch. Under the masthead, a nav labelled Footer holds four section columns (World, Business, Culture, Opinion), each a heading over four links. Beneath them, an editorial standards band of three cells — Corrections, Ownership and Ethics policy — each a heading that is the link, plus one sentence. A legal band carries the copyright and the policy links. The rails and the rules between the bands come from Guides. There is no newsletter. It's built from Guides and plain links.

FAQ

How do screen readers move through it?

The block is a footer. The sections and the standards sit in one nav labelled Footer. Each section is a small h2 over a list, so a screen reader can jump between desks by heading. Each standards title is a link inside its own h2, with the sentence after it. The policy links are a list named Legal. Every link shows the theme's focus ring.

Why is there no newsletter here?

This footer's feature is the standards band: where the newsroom corrects the record, who owns it, and the ethics policy. A signup is a different footer. Adding one here would put a second job in the block.

How does it fit on a phone?

The masthead comes first, then the four sections two by two (one row of four from lg), then the three standards stacked (one row from sm), then the legal row. The long wordmark wraps. Nothing scrolls sideways at 320 pixels.

How does it sit under the rest of the page?

The footer uses the same spine as every block: the page column, the two side rails and one top rule with + marks where it meets them. Placed under any other block, that rule is the only line between the two. The standards band and the legal band each open with their own rule. The footer keeps its bottom padding and draws no rule under the legal row, because it is the end of the page.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.

  • Pro

    The classic link-column footer for an email API: a brand column with the wordmark, one sentence and four social links, four groups of links behind a split divider, and a legal band with the copyright and the policy links.

  • Pro

    Mega Footer

    Link grids

    A mega footer for a cloud platform: a brand band, eight link groups with icons in two ruled bands of four on one desktop screen, an accordion on phones, and a legal band.

  • Pro

    Blog Footer

    Content and updates

    A blog footer for a data-engineering blog: topic pills with post counts, the two latest posts and an RSS link on one side, two link groups on the other.

  • Pro

    Community Footer

    Content and updates

    A community footer for forum software: a recurring calendar of three rows (cadence, name, kind badge, Join link), a plain row of community channels and a legal band.

  • Pro

    A brandless link directory: six groups of five links as cells on shared hairlines, three across by two down, with a legal band under the grid.

  • Pro

    Sitemap Filter Footer

    Sitemaps and trails

    A sitemap footer for a documentation host: a search field that filters 36 links across six columns as you type, with a live count and a clear button.