Split CTA Footer

A two-column footer: a parenthetical label, closing heading, pill-shaped CTA button, and email address on the left, beside a stacked oversized nav on the right, over a copyright and socials bar.

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/split-cta-footer.json

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

Usage

The file also exports footer6Demo, 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 { Footer6, footer6Demo } from "@/components/blocks/footer/footer6";

export default function Page() {
  return <Footer6 {...footer6Demo} />;
}

Props

Prop	Type	Default	Description
label	string	undefined	Small parenthetical label above the heading, e.g. "let's talk".
heading	ReactNode	none	Closing heading in the left column.
ctaLabel	string	none	Label on the pill CTA button.
ctaHref	string	none	Link target for the pill CTA button.
email	{ label: string; href: string }	undefined	Email address shown next to the CTA button.
nav	FooterLink[]	[]	Stacked oversized nav links in the right column.
socials	FooterLink[]	[]	Social links in the bottom bar.
copyright	string	undefined	Copyright text in the bottom bar.
className	string	none	Extra classes for the outer footer element.

Types

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

Behavior notes

label is wrapped in literal parentheses by the component, so pass it without them.
The CTA button navigates via next/link through the button's render prop, it is not a form submit.
nav links render large and right-aligned on desktop, stacking left-aligned on mobile.

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.

Studio Locations Footer

Footer for a studio with several addresses, a ruled locations list, and a real back-to-top button.