{ "contract": "tessli.public-library-item.v1", "canonicalPath": "/library/closing-cta-footer", "representations": { "json": "/library/closing-cta-footer/item.json", "markdown": "/library/closing-cta-footer/item.md" }, "preview": "/preview/closing-cta-footer", "item": { "slug": "closing-cta-footer", "title": "Closing CTA and footer", "kind": "section", "category": "cta", "summary": "One final action tied to the page's job, then a compact footer with a few grouped links, a real contact route and the legal links.", "status": "community", "install": "npx shadcn@latest add online-scope-lab/tessli/closing-cta-footer", "registry": { "type": "registry:block", "registryDependencies": [ "button" ], "dependencies": [] }, "notes": { "id": "closing-cta-footer", "kind": "section", "category": "cta", "title": "Closing CTA and footer", "summary": "One final action tied to the page's job, then a compact footer with a few grouped links, a real contact route and the legal links.", "use_when": [ "A marketing, pricing or product page ends and the reader should have one clear next step.", "The site needs a footer that helps people find a few things (pricing, help, contact, legal), not a sitemap." ], "avoid_when": [ "The page's job is not to convert (documentation, help, legal); leave out the CTA and keep the footer only.", "The site has dozens of destinations people browse from the footer; give it a proper sitemap page and link to it.", "The last action on the page is already the same as the hero's with nothing new to say; restate why to act, or drop the CTA." ], "rules": [ "H-01", "W-01", "W-02", "W-05", "S-02", "K-02", "R-01", "A-01" ], "ai_default": "A centred \"Ready to get started?\" band on a gradient with two equal filled buttons (\"Get started\" and \"Book a demo\") repeating the hero word for word, followed by a five-column link-farm footer of every page, a newsletter field, a row of social-media icons and an arrow after every link.", "why_this_is_better": [ "The closing heading restates the page's point as a reason to act now, and the single primary action says what happens next (\"Create a free workspace\").", "The alternative is a quiet text link (\"Compare plans\"), so the page ends on one obvious step instead of a choice between two equal buttons.", "A short note under the action removes the last doubt (price, card, commitment) and only says what is true.", "The footer groups a handful of links people actually look for, names a real contact route with who answers and how fast, and keeps legal links in their own row.", "Only the link that leaves the site carries ↗, with a screen-reader note; nothing else gets an arrow, and there are no icon-only social links." ], "failures": [ "Repeating the hero's headline and buttons word for word, so the closing section adds nothing.", "Adding a second filled button, or styling the secondary link as a button of equal weight.", "Turning the footer into a sitemap with five or more columns, or adding social icons with no visible labels.", "Writing a reassurance note (\"Cancel anytime\", \"No card needed\") that the product's terms do not support.", "Pointing the contact line at an inbox nobody reads, or promising a reply time nobody keeps." ], "states": [ "default", "footer-only" ], "responsive": { "desktop": "The closing heading, text and actions share one left edge with text capped at a readable measure; the footer puts the name, description and contact in one column beside two to four link groups, with copyright and legal links in a row below.", "mobile": "The primary action becomes full width with the text link below it on the same left edge; the footer stacks name and contact first, link groups in two columns, then copyright and legal links." }, "a11y": [ "The closing section is labelled by its h2; the footer is a footer element with two navigation landmarks, \"Footer\" and \"Legal\".", "Each link group is a list labelled by its visible group name (aria-labelledby), so screen readers announce \"Product, list, 3 items\".", "Every footer link, the brand link and the text link are at least 44px tall with a visible focus ring; the mailto link in the contact sentence is an inline link.", "The external link's ↗ is aria-hidden and replaced by \"(another site)\" for screen readers; nothing relies on colour or hover alone." ], "status": "community", "reviewed_by": [], "reviewed_at": null, "contributors": [], "provenance": "original", "license": "MIT" }, "rules": [ { "id": "H-01", "statement": "Give each section, card or dialog at most one primary-styled action.", "path": "/rules/H-01" }, { "id": "W-01", "statement": "Write headings that make the product's point, not labels like \"Features\" or \"FAQ\".", "path": "/rules/W-01" }, { "id": "W-02", "statement": "Label actions with what happens next, not \"Get started\", \"Submit\" or \"Learn more\".", "path": "/rules/W-02" }, { "id": "W-05", "statement": "Put an arrow on a link only when it leaves the site (↗), never on every link.", "path": "/rules/W-05" }, { "id": "S-02", "statement": "Align a section's heading, text and actions on one left edge; centre only short blocks.", "path": "/rules/S-02" }, { "id": "K-02", "statement": "Use a link to go to a URL and a button to act on the page; the style never decides.", "path": "/rules/K-02" }, { "id": "R-01", "statement": "On phones, restack content by priority and adapt components; don't shrink the desktop.", "path": "/rules/R-01" }, { "id": "A-01", "statement": "Make every interactive target at least 44×44 CSS px; inline text links excepted.", "path": "/rules/A-01" } ], "explanation": "The end of a page is where the reader decides. A closing section earns its place when it restates the page's point as a reason to act now and offers **one** action named by what happens next. Anything else is a quieter text link, not a second filled button.\n\nThe footer is for finding things, not for showing how big the site is. Keep it to a few groups of links people really look for (pricing, help, export, security), a contact route that says who answers and how fast, and the legal links. The product name is text; no logo, newsletter field or social icons are needed.\n\nPass `cta` only on pages whose job is to convert. On help, documentation and legal pages, leave it out and the footer stands alone, as the `footer-only` state shows. Mark links that leave the site with `external`, and only those get an arrow.", "source": { "path": "web/registry/items/closing-cta-footer/closing-cta-footer.tsx", "code": "import * as React from \"react\";\n\nimport { cn } from \"@/registry/shadcn/lib/utils\";\nimport { buttonVariants } from \"@/registry/shadcn/ui/button\";\n\nexport type FooterLink = {\n label: string;\n href: string;\n /**\n * The link leaves your site. It gets a ↗ and a screen-reader note; links\n * that stay on the site never get an arrow.\n */\n external?: boolean;\n};\n\nexport type FooterLinkGroup = {\n /** A short, plain group name: \"Product\", \"Help\", \"Company\". */\n title: string;\n /** Three to five links people actually look for at the end of a page. */\n links: FooterLink[];\n};\n\nexport type ClosingCta = {\n /**\n * The page's point, restated as a reason to act now. Not \"Ready to get\n * started?\".\n */\n title: React.ReactNode;\n description?: React.ReactNode;\n /** The one primary action, named by what happens next. */\n action: { label: string; href: string };\n /** An optional quieter alternative, rendered as a text link, not a button. */\n secondaryAction?: { label: string; href: string };\n /** What removes the last doubt: price, card, commitment. Only if true. */\n note?: React.ReactNode;\n};\n\nexport type ClosingCtaFooterProps = React.ComponentProps<\"div\"> & {\n /** Leave out on pages whose job is not to convert (docs, legal, help). */\n cta?: ClosingCta;\n /** The product name as text, linking home. No logo is required. */\n brand: { name: string; href: string; description?: React.ReactNode };\n /** Two to four groups. More than that is a sitemap, not a footer. */\n groups: FooterLinkGroup[];\n /** A real contact route: who answers and how. */\n contact?: React.ReactNode;\n /** Privacy, terms and any other legally required links. */\n legal?: FooterLink[];\n /** Copyright or company line, e.g. \"© 2026 Example Ltd.\" */\n copyright?: React.ReactNode;\n};\n\nconst linkClass =\n \"inline-flex min-h-11 min-w-11 items-center rounded-sm text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline focus-visible:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none\";\n\nfunction FooterAnchor({ link }: { link: FooterLink }) {\n return (\n \n {/* One inline run, so a wrapped label keeps ↗ beside its last word. */}\n \n {link.label}\n {link.external ? (\n <>\n  ↗\n (another site)\n \n ) : null}\n \n \n );\n}\n\nexport function ClosingCtaFooter({\n cta,\n brand,\n groups,\n contact,\n legal,\n copyright,\n className,\n ...props\n}: ClosingCtaFooterProps) {\n const id = React.useId();\n const ctaHeadingId = `${id}-cta`;\n\n return (\n \n {cta ? (\n
\n
\n
\n \n {cta.title}\n \n {cta.description ? (\n

\n {cta.description}\n

\n ) : null}\n
\n \n {cta.action.label}\n \n {cta.secondaryAction ? (\n \n {cta.secondaryAction.label}\n \n ) : null}\n
\n {cta.note ? (\n
\n {cta.note}\n
\n ) : null}\n
\n
\n
\n ) : null}\n\n \n \n );\n}\n" } }, "boundaries": [ "Community items are merged and pass automated checks (schema, build, accessibility, overflow and console errors in three themes at five widths); only items with status reviewed have been checked by a maintainer.", "Each rule id links to its page at /rules/; every rule is a draft until a maintainer signs it.", "Tessli does not claim that using an item improves AI-generated UI; that claim waits for a published evaluation." ] }