Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Single Quote Footer Block for Ark UI

A footer for a field-service app with one customer quote and its speaker at the start, behind a split divider the brand and two link groups, and a legal band.

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 single-quote footer for React with Ark UI. At the start one customer quote is set large in a blockquote, with the speaker's initials, name, role and company under it. Behind a split divider that runs from the spine's top rule to the end of the page, the wordmark and one sentence sit over two link groups in a nav labelled Footer, and a legal band closes the page. On a phone the quote comes first, then a rule, then the brand and the links. It is one quote, not a testimonials section: the footer's job is still its navigation. It's built from Guides, an Avatar, plain links and your theme's tokens.

FAQ

How do I change the quote?

Edit the QUOTE object at the top of the file: the text, the speaker's name, initials, role and company. Keep it to one or two sentences so the quote stays beside the links without growing the footer; the text is capped at a readable width.

Can I show a photo instead of initials?

Yes. The speaker's picture is the catalog Avatar: add an AvatarImage with the photo's src before the fallback, and keep the initials as the fallback. The Avatar is hidden from assistive technology because the name sits next to it.

How do screen readers read it?

The block is a footer element. The quote is a figure holding a blockquote and a figcaption with the speaker, so it is read as a quote with its attribution. The links sit in one nav labelled Footer, each group with an h2. The quote is not a heading and the footer has no landmark of its own for it.

How does it fit on a phone?

The quote and the speaker come first so the quote is on the first screen, then a rule, then the wordmark, the sentence and the link groups two across, then the legal band. Nothing scrolls sideways at 320 pixels.

Does it work in right-to-left text?

Yes. The quote sits in a bdi so its quotation marks stay with it, the split flips so the quote is at the start, and the divider and marks follow. The wordmark is held left to right.

All 100 footer blocks