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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | none | Small uppercase label above the heading; only rendered when set. |
| heading | ReactNode | none | Section heading. |
| description | string | undefined | Section intro text below the heading. |
| programmes | ProgrammeItem[] | none | The three (or more) programme cards. |
| className | string | none | Extra 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.
More Health Blocks
View all →Care Overview Dashboard
Clinical overview with an eyebrow over a hairline rule, a two-column heading, and a bordered dashboard panel with a stat, a retention ring, a status strip, and an outcomes row.
Daily Health Check-in
Two-column layout with feature highlights and a daily summary card showing heart rate, activity, and recovery metrics.
Health Statistics Display
Large-format statistics grid showcasing key metrics like member counts, satisfaction rates, and years of service.
Wellness Editorial Section
Long-form content section with rich text, bullet point highlights, and call-to-action buttons.
Medical Services Grid
Service cards displaying medical specialties with appointment durations, feature lists, and booking CTAs.
Wellness Hero Section
Split-layout hero with large typography, serene imagery, and a floating testimonial card.