Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Level Cells Footer Block for Svelte

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 Svelte with Ark 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.

All 100 footer blocks