Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Icon Tile Grid Footer Block for Ark UI

A footer where the tiles are the navigation: a brand cell beside six link tiles with an icon, a name and one line each, on shared hairlines, and a legal 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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A footer for React with Ark UI where each tile is a link. At the start, a brand cell with the wordmark and one sentence; beside it, six tiles (Features, Pricing, Documentation, Templates, Customers, Contact), each an icon, a name and one line about where it goes, three across by two down, all on shared hairlines. The whole tile is the link: it lightens on hover and shows the theme's ring on keyboard focus, and a small arrow appears at its corner. A legal band under a rule with + marks carries the copyright and the policies. The page's rails and top rule come from the Guides spine, so the grid starts at the top rule. On a phone the brand cell comes first and the tiles sit two across. It's built from Guides, plain links and your theme's tokens.

FAQ

How do I change the tiles?

Edit TILES at the top of the file: each tile is an href, an icon (any Lucide icon), a label and a note, the one line under the name. Six fill the three-by-two grid; with a different count the last row of the grid will be short, so keep to a multiple of two on phones and of three from md. Every tile is an anchor with href="#".

Why is the hover tint a solid colour?

The hairlines are the grid's gaps showing its border colour, so a translucent tint on a tile would let that colour through and darken the tile's edge. The tint is a solid mix of your muted colour and the page background, so it follows every theme. The tiles aren't positioned, so the rails and rules stay on top.

How do screen readers move through it?

The block is a footer element, the page's content-info landmark when placed outside main. The tiles are a list in a nav labelled Footer, with a visually hidden h2 naming it. Each tile is one link whose name is its label followed by its line, and the icon and the arrow are hidden from assistive technology. The policy links are a list named Legal.

What about touch and keyboard users?

Every tile is over 100 pixels tall, a large touch target, and the arrow is only an extra: on a touch screen it never shows, and a keyboard user sees it with the focus ring when the tile has focus.

How does it fit on a phone?

Below lg the brand cell spans the page, then the tiles sit two across (three across from md), and the legal band's copyright sits above the policy links. Tile text wraps rather than truncates. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks