Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Giant Wordmark Footer Block for Ark UI

A wordmark-led footer for an outerwear label: a short mission statement, one row of links, a legal band, and the brand name set at giant size, cut off at the foot and faded out by a mask.

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 footer for React with Ark UI that ends on the brand. A short mission statement, its first sentence in the foreground colour, opens the block; under it one row of navigation links and a legal band, each ruled by the page's Guides; and below them the brand name at a giant size, cut off at the foot and faded out through a mask. The name is the only text at that size and is decoration, so the mission statement names the brand for screen readers. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.

FAQ

How is the wordmark sized?

Its font size scales with the viewport between 4rem and 16rem (clamp(4rem,26vw,16rem)), so on a phone it fills most of the width and on a desktop it stops at a bold but not overwhelming size. A box 0.66 em tall clips it, and a mask fades the cut. Change the name and check that it still fits at 320 pixels: a longer name needs a smaller vw value.

Is the giant wordmark read out by screen readers?

No. It is hidden from assistive technology, because the mission statement above it already names the brand, and it stays a left-to-right element even in a right-to-left page, sitting at the start.

How does it fit on a phone?

The mission statement wraps, the row of links wraps to two lines, the legal band stacks, and the wordmark shrinks with the screen. Nothing scrolls sideways at 320 pixels.

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.