Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Milestone Rail Footer Block for Ark UI

A footer for an architecture practice with two link groups and a rail of four milestones, horizontal with a dot per year on a desktop and vertical on a phone.

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 milestone footer for React with Ark UI. The wordmark and one sentence sit beside two link groups in a nav labelled Footer. Under them a band, ruled with a + mark where it meets each rail, holds a rail of four milestones: on a desktop one hairline runs from rail to rail with a dot for each milestone, its year above and its line below; on a phone the rail turns vertical down the start edge. A legal band closes the page. The years are fixed in the data, so the rail never goes stale. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.

FAQ

How do I change the milestones?

Edit the MILESTONES array at the top of the file: each entry is a year string and a label, oldest first. Four fill the desktop row; with a different count, change md:grid-cols-4 on the list to match. The years are typed, not computed, so a milestone from 2019 stays 2019.

How is the rail drawn?

There is no script and no SVG. Each item draws its own piece of the rail: a one-pixel hairline across its width and a dot at its start, so the pieces join into one line from rail to rail. On a phone the items stack with a dot on a vertical line that runs down the start edge.

How do screen readers move through it?

The block is a footer element, so at the end of the page it is the content-info landmark. The rail has an h2 ("Twenty years of building") and the milestones are an ordered list, each read as the year and then the line. The rail's drawing, the dots and hairlines, is hidden from assistive technology. The links sit in one nav labelled Footer.

Does the rail follow right-to-left text?

Yes. The dots sit at the start of each item and the first milestone is at the start of the row, so the rail reads from the end side when the page flips. Each year is in a bdi.

How does it fit on a phone?

The brand and the two link groups stack, then the rail becomes a vertical list with a line and a dot at the start of each item, then the legal band. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks