shadcn.io is not affiliated with official shadcn/ui
Oversized Email Footer Block for Solid
A footer for a studio built around one huge mailto link, with project-type chips that really add to the link's subject line, then the wordmark, an address and two link groups.
Installation
Overview
A studio footer for Solid with Ark UI that ends the page on an email address set as huge type. Four chips above it (Brand, Web, Product, Motion) really work: each one you press is added to the link's subject line, so "Brand and Web project" is what the visitor's mail app opens with, and the line is shown under the address and announced politely. With nothing pressed the subject is "New project". On a phone the address wraps at the at sign and the type scales with the screen. A band below holds the wordmark, the studio's address and two link groups in a nav labelled Footer, and a legal band closes the page.
FAQ
How does the subject line work?
The chips are a multi-select toggle group. The subject is built from the pressed chips in a fixed order (Brand, Web, Product, Motion), joined with commas and "and", then "project". It is URL-encoded into the mailto: link's subject parameter, and the same text shows under the address. Press a chip again to take it back.
Is the change announced to screen readers?
Yes. The subject line under the address is a polite live region, so a screen reader reads the new subject after each press. The chips are real toggle buttons, so their pressed state is announced too.
Why does the address wrap at the at sign?
The address is split with a word-break opportunity after the "@". On a phone the font size follows the screen width, and where the whole address would be too wide it breaks there, never in the middle of the name or the domain. From lg it fits on one line.
What happens in right-to-left layouts?
The link is forced left-to-right, because an email address always reads that way; the surrounding band and the chips follow the page direction.