Three footers — a link-rich directory with a newsletter, an oversized wordmark whose letters rise as you scroll, and a compact bar with a live local clock and status dot.
Directory
directory.tsxBrand, five link columns with sliding underlines and tags, a newsletter card with loading and joined states, and a legal row.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | { name: string; monogram?: string; tagline?: string; href?: string } | — | Brand block with a volt monogram tile. |
columns | DirectoryColumn[] | — | { title, links: { label, href, tag?, external? }[] }. Up to five. |
newsletter | { title; description?; placeholder?; cta?; onSubscribe? } | null | — | null hides the form. onSubscribe may return a promise. |
legal | DirectoryLink[] | — | Links on the base row. |
copyright | string | — | Text on the base row. |
className | string | — | Classes for the footer. |
Wordmark
wordmark.tsxLarge display links and a statement above an oversized brand wordmark whose letters rise and straighten as the footer scrolls into view.
| Prop | Type | Default | Description |
|---|---|---|---|
wordmark | string | "Halden" | The oversized word; 4–8 letters fill the width best. |
statement | string | — | One line under the links. |
links | WordmarkLink[] | — | Primary links in display type. |
secondary | WordmarkLink[] | — | Smaller links on the right. |
backToTop | boolean | true | Show the back-to-top button. |
copyright | string | — | Text on the base row. |
className | string | — | Classes for the footer. |
Local time
local-time.tsxCompact one-row footer with a live clock in the team's time zone whose digits roll each second, an office-hours hint and a status dot.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | { name: string; monogram?: string; href?: string } | — | Monogram and name on the left. |
timeZone | string | "Europe/Lisbon" | IANA time zone for the clock. |
city | string | "Lisbon" | City label next to the clock. |
hours | [number, number] | [9, 18] | Office hours in that zone; drives the Team online chip. |
status | "operational" | "degraded" | "outage" | "operational" | Colour and default wording of the status pill. |
statusLabel / statusHref | string | — | Override the status text and link. |
links | LocalTimeLink[] | — | Small links on the right. |
className | string | — | Classes for the footer. |
Install the whole set
Installs every footer sections variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Each footer is a footer landmark with a labelled nav; external links announce that they open a new tab.
- The newsletter field has a real label, aria-invalid and a polite error line; the clock exposes hours and minutes once, not every second.
- The wordmark keeps its text in aria-label and renders static under reduced motion; the status ping stops too.