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.
Installation
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 I change the sections and the standards?
Edit SECTIONS (each a title and its links), STANDARDS (a title, one line and an href) and LEGAL. Every link is a plain anchor with href="#": point it at its page. Four sections fit the row on a wide screen; the standards band is three cells, so add or remove a cell and change the column count to match.
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.
Related
- Pro
Link Columns Footer
Link gridsThe 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 gridsA 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 updatesA 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 updatesA 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
Hairline Cells Link Directory Footer
Link gridsA 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 trailsA 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.