Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Footers
The five footers that go with the five bars. What changes between them is their LENGTH, and that is a decision.
Shop
Four bands, and it is long on purpose: whoever reached the bottom of a catalogue page did not find what they came for, and this is the last place to offer warranty, returns, delivery times and a person to talk to.
<footer-ecommerce :columns :legal phone email :note />
Property portal
A dark band in both themes, over a photograph: the brand card with the contact channels, the site's index in columns, the day's exchange rates and the newsletter. Each block renders only with its data, and the form sends nothing: it emits `subscribe` and gets the state back.
<footer-real-estate :columns :legal :contacts :rates :subscribe :image @subscribe />
Course
The first band is the CONTINUATION: the bottom of a lesson is where a reader decides whether to carry on, and the footer is the last chance to say what comes next.
<footer-learn :columns :legal :cta-title :cta-text :cta-label />
Help desk
The service’s state shows up again here, with the hours and the channels. It is not duplication: whoever scrolled a whole article without solving their problem is exactly who is about to open a ticket.
<footer-help-desk :columns :status :hours phone email />
Landing page
One band and almost nothing. Four columns of links would be twenty ways to leave without doing the one thing the page asks.
<footer-landing :links :tagline />
The phone version
The five footers in a 390px viewport. The columns stack by media query, and those measure the WINDOW: a narrow box in the middle of a wide page would still show the four-column footer.
This is where the length is paid for: the shop’s footer becomes one long scrolling column, and the landing page’s still fits on a screen.
See the navbarsFor AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/footers.md