CareMetric Footer

When to use

• A healthcare, wellness or calm B2B site that wants its brand to close the page
• Footers with up to four short columns of links

When not to use

• Sites that need a newsletter or legal-heavy footer — there is room for neither
• Brands without a mark that survives being set huge

Installation

Add CareMetric Footer with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · Next.js (it loads its fonts with next/font) · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/caremetric-footer.json"

Usage

import CaremetricFooter from "@/components/blocx/CaremetricFooter";

export default function Page() {
  return <CaremetricFooter />;
}

API reference

CaremetricFooter

Takes no props — drop it in as it is.

The link columns are the COLUMNS list at the top of CaremetricFooter.tsx; the mark's paths are in caremetric-mark.ts.

Accessibility

• The footer is labelled, and its columns sit in a labelled nav with real headings
• The giant mark is aria-hidden; the logo link carries the brand's name

Motion

• The panel rises into place, the columns fade in on a stagger and the mark pops in shape by shape

Responsive behavior

• Figma's coordinates hold on desktop; below 1200px it becomes a flowing layout
• On a phone the links fold into two columns