Wordmark Card Footer

A footer with a CTA row up top, then a bordered card holding the brand mark, a statement heading, a real back-to-top button, three link columns, a copyright line, and an oversized wordmark that bleeds off the bottom edge of the card. Perfect for agency and studio sites that want a strong closing brand moment.

By Staaarter Team

Footer

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/wordmark-card-footer.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/footer/footer17.tsx instead.

Usage

The file also exports footer17Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Footer17, footer17Demo } from "@/components/blocks/footer/footer17";

export default function Page() {
  return <Footer17 {...footer17Demo} />;
}

Props

Prop	Type	Default	Description
ctaHeading	ReactNode	none	Heading in the top CTA row.
ctaLabel	string	none	Label for the CTA button.
ctaHref	string	none	Href for the CTA button.
brand	string	none	Small lowercase brand mark at the top of the card.
statement	ReactNode	none	Larger statement heading next to the back-to-top button.
backToTopLabel	string	"Back to top"	Label for the back-to-top button.
columns	FooterLinkGroup[]	none	Three link columns inside the card.
copyright	string	none	Copyright line above the bleeding wordmark.
credit	string	undefined	Optional credit line next to the copyright.
wordmark	string	none	Oversized wordmark text that bleeds off the bottom edge of the card.
className	string	none	Extra classes for the outer footer element.

Types

type FooterLink = { label: string; href: string };

type FooterLinkGroup = { title: string; links: FooterLink[] };

Behavior notes

The back-to-top button is real: clicking it calls window.scrollTo({ top: 0, behavior: "smooth" }); the CTA button and all footer links are inert, matching every other static link/CTA in the Blocks catalog.
The oversized wordmark at the bottom is purely decorative (aria-hidden, low-opacity text) and sits inside an overflow-hidden card so it visually bleeds off the edge without breaking layout.
This is a client component (needed for the real back-to-top handler), so its demo props live in the sibling footer17.demo.tsx file per the repo's client/demo-split convention.

More Footer Blocks

View all →

Minimal Centered Footer

Compact centered footer with a lowercase wordmark, tagline, uppercase link row, and a social row over a hairline rule.

CTA Footer

Footer opening with a light closing heading and accent buttons, then a slim wordmark and link bottom bar.

Editorial Newsletter Footer

Light footer with a wordmark, tagline, newsletter signup, three link columns, and a legal bottom bar.

Brand Column Footer

Four-column footer with a wide brand column, oversized wordmark, and three ruled link columns.

Live Studio Clock Footer

Footer built around a real ticking clock with a pulsing open/closed status, city, and day.

Split CTA Footer

Two-column footer with a pill CTA and email on the left, a stacked oversized nav on the right.