Staaarter

Care Programme Cards

Three hairline programme cards, each pairing a light programme name with a muted duration line, a short explanation, a checked list of what is included, and a link into the full programme. Perfect for clinics and coaching services that offer a small set of structured care tiers.

By Staaarter Team
Health
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/care-programme-cards.json

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

Usage

The file also exports health1Demo, 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 { Health1, health1Demo } from "@/components/blocks/health/health1";

export default function Page() {
  return <Health1 {...health1Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringnoneSmall uppercase label above the heading; only rendered when set.
headingReactNodenoneSection heading.
descriptionstringundefinedSection intro text below the heading.
programmesProgrammeItem[]noneThe three (or more) programme cards.
classNamestringnoneExtra classes for the outer section element.

Types

type ProgrammeItem = {
  name: string;
  duration: string;
  description: string;
  features: string[];
  href: string;
};

Behavior notes

  • The eyebrow and description above the grid only render when set; the heading always renders.
  • Each card's feature list has no item limit; cards use a flex column so the trailing "View programme" link stays aligned to the bottom of the card even when feature-list lengths differ.
  • The "View programme" link is a real anchor via Button's render prop, not a form submission or client-side action.