shadcn.io is not affiliated with official shadcn/ui
Call To Action Cell Footer Block for Svelte
A footer for a workflow tool whose call to action is the last cell of the link grid: a brand and three link groups beside a card in a card with a small flow drawing, a title, one line and a Shine Button.
Installation
Overview
A footer for Svelte with Ark UI that asks for the sign-up where people are already looking for links. A split divider, running from the top rule to the end of the page, puts the brand (the wordmark and one sentence) over three link groups in a nav labelled Footer on one side, and a call to action on the other: a card in a card, a raised card inside a tinted shell, holding a three-chip drawing of a flow (a trigger, a row, a note), a title, one line and the Shine Button "Start free". It is the fourth cell of the link grid, the size of a link group, so it never reads as the page's closing section. A legal band under both repeats the split, with the copyright under the brand and the policy links under the card. On a phone the brand, the groups, the card and the legal row stack with a rule between them. It has no state: plain links, Guides and your theme's tokens.
FAQ
How do I change the call to action?
Edit the title and the line in the card, the label of the Shine Button and its href. The button is the only primary control in the footer: keep any second action out of the card, or make it a link in a link group. The card's drawing is three entries in the FLOW array at the top of the file (an icon, an id and a tone): swap the icons for your own steps, and keep the first one filled.
How is this different from a call-to-action section?
A closing call-to-action section is its own block above the footer, with a large centred headline. Here the offer is part of the footer's grid: it sits in a column beside the links, has a card-sized title and no band of its own, and the page still ends on links and a legal row. Use it when the page has no closing section, or when you want a quieter second ask.
How does it read to a screen reader?
The block is a footer, so it is the page's content-info landmark. The three link groups are in a nav labelled Footer, each with an h2 over a list; the card has its own h2. The drawing is hidden from assistive technology because it only decorates the title, and the policy links form a list named Legal.
How is the button a link on each library?
It is a real link styled as the Shine Button. The button wraps an anchor. Point href at your sign-up page.
How does it fit on a phone?
The brand and the groups come first (the groups two by two, then the third on its own), so the navigation is on the first screen; a rule separates them from the card, and a second rule from the legal row. The card keeps its full width and the button stays on one line at 320 pixels.