Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Official Site Strip Footer Block for React

A footer for a county permits office with a tinted official-site strip and a How you know button, a drawn county seal, three link groups, a row of required links and a reviewed-quarterly line.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A footer for a public office for React with Base UI. A tinted strip at the top says "An official website of Esker County" and carries a "How you know" button that opens two short statements (an official web address, a secure connection). Under a ruled band come a drawn county seal, the office's name, a sentence and its hours beside three link groups in a nav labelled Footer, a row of the links a public site must carry (accessibility, public records, privacy, contact officials), and a last band with the copyright and "Page reviewed quarterly". The county, its seal and its web address are fictional, and the statements are example wording: use your own domain and the text your jurisdiction requires. It's built from Guides, a Collapsible, a drawn SVG seal and your theme's tokens.

FAQ

How do I change the official-site strip?

Edit the name in the strip and the two entries of the STATEMENTS array (an icon, a title and a sentence each). The strip is a tinted panel inside the footer's column, so the page rails still run through it. Never claim an official status you do not have: a strip like this belongs only on a real public body's site.

Can I use my own seal?

Yes. The seal is a drawn SVG made of rings, a ring of ticks, hills, a river and a sun, hidden from assistive technology because the office's name sits next to it in text. Replace the component with your own img (give it an empty alt while the name stays beside it) or a differently drawn mark.

Is the How you know content in the page when it is closed?

On every target but Radix the statements stay in the page, hidden until the button is pressed. The button is a real button with aria-expanded, it works with Enter and Space, and its label never changes.

What does the reviewed line promise?

It says the page is checked on a cadence ("quarterly") instead of a date, so it never goes stale by itself. Only keep it if somebody really does review the page on that schedule.

How do screen readers move through it?

The block is a footer, the content-info landmark. The link groups are one nav labelled Footer with an h2 per group, "How you know" is an h2 button, the statements have h3s, and the required links are a labelled list. The opening hours are time elements.

  • Pro

    Accessibility Statement Footer

    Trust and compliance

    A footer for a lesson reader with a conformance statement at the start (a drawn seal, the standard, the level and the review cadence, and a report-a-barrier link) and three link columns at the end.

  • Pro

    Rights by Region Footer

    Trust and compliance

    A footer for an HR platform whose segmented control (EU and UK, United States, Elsewhere) swaps the four privacy-rights links that apply there, with the legal documents in a row under it.

  • Pro

    Company Facts Footer

    Company and places

    A company footer for a construction-software firm: a brand with a facts list (founded, headquarters, people, customers, company number) and two link columns in cells sharing hairlines, then a slim band.

  • Pro

    Emergency Notice Footer

    Trust and compliance

    A footer for a telehealth clinic that opens with an emergency notice card and the nurse line as a large phone link, above four patient columns and a legal band with the privacy practices notice.

  • Pro

    Legal Strip Footer

    Slim and minimal

    A legal-only footer: a strip of five legal links as cells on shared hairlines, and a band with the wordmark and the legal entity line.

  • Pro

    Link Columns Footer

    Link grids

    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.

All 100 footer blocks