Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Emergency Notice Footer Block for React

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.

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 clinic for React with Base UI. It opens with the one thing a patient may need before anything else: an emergency notice as a raised card inside a tinted shell, saying to call the local emergency number, with the nurse line beside it as a large tel: link. Under a ruled band come four patient columns (patient portal, find a doctor, billing, records) in a nav labelled Footer. A last band holds the wordmark, one sentence and the legal links, including "Notice of Privacy Practices" and "Language assistance". The notice stays first on a phone. The phone number is fictional (555-01xx) and the wording is example text: have your clinical and legal teams write the real notice. It's built from Guides, plain links and your theme's tokens.

FAQ

How do I change the nurse line?

Edit the number in the link's text and its tel: target together (href="tel:+12065550143"). The text has dir="ltr", so it reads left to right even in a right-to-left page. The emergency sentence says to call the local emergency number rather than a fixed one, so it stays true in every country.

Why does the notice come first?

Someone who needs help should not scroll past a sitemap for it. The card is the first thing in the footer on every screen size, it is an aside named by its own heading, and the nurse line is a real link, so a phone dials it on tap.

What happens on a phone?

The card stacks (the text, then the number at a large size), the four columns sit two by two, and the legal links wrap under the wordmark. Nothing scrolls sideways at 320 pixels.

How do screen readers move through it?

The block is a footer, the content-info landmark at the end of the page. The emergency card is an aside with an h2; the patient columns are one nav labelled Footer with an h2 per group; the legal links are a labelled list.

  • 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

    Support Hub Footer

    Company and places

    A support-hub footer for a help-desk product: a question and a row of help links, then three support channels as cells, live chat with an online status, email with its reply time and phone with its hours, each one link.

  • Pro

    Contact Details Footer

    Company and places

    A contact-details footer for an accounting firm: the brand and two link groups on shared hairlines, and four contact points as cells in a definition list, each with an icon: email, phone, postal address and reply time.

  • 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

    Licence Table Footer

    Trust and compliance

    A footer for a brokerage app with a framed licence table (jurisdiction, authority, registration number), an expandable Important disclosures panel and a trading status line in the legal band.

  • Pro

    Official Site Strip Footer

    Trust and compliance

    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.

All 100 footer blocks