Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Company Facts Footer Block for Ark UI

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.

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

The "about the company" footer for React with Ark UI. The first cell holds the brand, a monogram, the name and one sentence, over a facts list: a definition list of five rows (Founded, Headquarters, People, Customers, Company no.) ruled by hairlines. Beside it are two link columns, Company and Legal, in cells that share hairlines with it, and a slim band under them holds the copyright and three more links. The figures are example data, replace them with yours. It's built from Guides, the catalog's Data List, plain links and your theme's tokens.

FAQ

How do I edit the facts?

Edit the FACTS array at the top of the file: each entry is a label and a value. The rows are a real definition list (dl, dt and dd), so screen readers announce each label with its value. The figures in the block are example data, not real company details.

How do screen readers move through it?

The block is a footer element: placed at the end of the page, outside main, it is the page's content-info landmark. The facts are a definition list under an h2, and each link column is a nav (the first labelled Footer, the second Footer, Legal) with its own h2. Every link shows the theme's focus ring when reached by keyboard.

How does it fit on a phone?

The facts take the full width, then Company and Legal sit side by side under them, then the slim band stacks. 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.