Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Level Cells Footer Block for React

A footer for a coding school with three level cells (Foundations, Professional, Advanced) each with a duration badge and three course links, and an accreditation line with a drawn seal in the 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 that doubles as the course map for React with Base UI. A first band holds the wordmark and one sentence. Under it three cells with overshoot lines and a + mark (Foundations, Professional, Advanced) sit in one nav labelled Footer, each with an h2, a duration badge and three course links. A legal band closes the page: a drawn accreditation seal beside one accreditation line, the policy links and the copyright. The accrediting council and its reference are invented, labelled as example data, and the seal is a drawn mark that copies no real one: only show an accreditation your school holds. It's built from Guides, Badge, a drawn SVG and your theme's tokens.

FAQ

How do I change the levels and courses?

Edit the LEVELS array at the top of the file: each level has a title, a duration for the badge and a list of course links. Keep three links per level so the cells stay the same height; a fourth link makes that cell taller and the others stay level at the top.

Is the accreditation real?

No. The council, the reference and the seal are invented for the demo, and the line says so. Replace them with the exact name and reference of your own accreditation, link the line to the register entry, and remove the block if you hold none, because the claim must be true.

How is the seal drawn, and is it read aloud?

It is a small inline SVG of two rings, a dotted ring and a check mark in the text colour at reduced strength, so it follows the theme. It is hidden from assistive technology because the line next to it says the same thing in words.

What happens on a phone?

The three cells stack with their overshoot lines kept apart, and the legal band wraps: the seal and line first, then the policy links and copyright. Nothing scrolls sideways at 320 pixels.

How do screen readers move through it?

The block is a footer, the content-info landmark. The cells are a list inside one nav labelled Footer, each with an h2 and a nested list of course links; the legal links are a labelled list. The duration badge is plain text next to its level's heading.

  • Pro

    Feature Promise Grid Footer

    Products and catalogs

    A footer that leads with three promises: icon cells with a one-line promise and a Learn more link, then the brand beside two link columns, and a legal band.

  • Pro

    Icon Tile Grid Footer

    Link grids

    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.

  • Pro

    Audit Table Footer

    Trust and compliance

    A footer for a backup vault with an audit table in a framed figure (the programme, its scope, how often it is audited and a link to request the report) beneath the brand and three link columns.

  • Pro

    Integration Directory Footer

    Products and catalogs

    A footer for an integrations hub with the brand and three link groups behind a split divider, and a directory of four category cells (Data, Messaging, Auth, Billing) listing sixteen integrations with monogram tiles.

  • Pro

    Gift Breakdown Footer

    Calls to action

    A footer for a conservation charity with a framed stacked bar showing where a gift goes (programs, fundraising, admin) with a legend, a Donate button, the registered charity number and two link groups.

  • Pro

    Official Site Strip Footer

    Trust and compliance

    A footer for a county permits office with a tinted official-site strip and a How you know button, a drawn county seal, three link groups, a row of required links and a reviewed-quarterly line.

All 100 footer blocks