Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Regional Offices Footer Block for Svelte

A footer for an enterprise resource planner with five link columns, a band of regional office addresses, and social links on the legal row.

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 regional-offices footer for Svelte with Ark UI, for a company people visit in more than one city. Tallyhurst’s wordmark and one sentence sit above five link groups (Product, Solutions, Developers, Company, Legal) of four links, in a nav labelled Footer. From md the groups are columns, three across and five from lg, under a rule with + marks. Below md the same groups are an Accordion, one open at a time, Product open first, and the links are the same ones. Under the groups, a second band is “Regional offices”: three cells on shared hairlines, Americas, EMEA and APAC, each an h3 and two address elements with a city, a street and a phone link. The legal row carries the copyright and four social links, each a generic glyph plus the network’s name. The rails and the top rule come from the Guides spine, and the footer draws no rule under the legal row. It’s built from Accordion, Guides and your theme’s tokens.

FAQ

How do I change the offices?

Edit REGIONS. Each region is an id, a name and an offices array. Each office is a city, a street, a phone (the visible text) and an href such as tel:+14155550148. Two offices per region fill the cell; the grid is one column on a phone and three from md. The numbers in the file are fictional. Keep the phone on dir="ltr" so a right-to-left page doesn’t reorder it.

How do I add a link group?

Edit GROUPS. Each group is an id, a title and four links. The id is the accordion value. Five groups become five columns from lg and an accordion of five on a phone. A sixth group still stacks in the accordion; change lg:grid-cols-5 if the desktop row should hold it.

Are the links in the page twice?

Yes. The markup holds the desktop columns and the phone accordion as two navs, each labelled Footer, and CSS shows one at a time (max-md:hidden and md:hidden). The hidden one is display: none, so it is out of the accessibility tree and the tab order. The cost is the links once more in the HTML.

How does the phone accordion work?

Each group is a heading with a button. One group is open at a time, opening another closes it, and Product starts open. The open group’s four links are a single column. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every group’s links are in the markup from the start, hidden until it opens. Up and Down move between the headings, and Home and End jump to the first and last.

Why do the social links show a name and not only an icon?

The icon set has no brand logos, and an unlabelled glyph doesn’t say where it goes. Each link in SOCIAL is an icon, a label and an href, and the label is visible. That label is the accessible name. Replace the icon and keep the label.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale. The year is read when the footer renders. The accordion’s open state is the only interaction.

All 100 footer blocks