Card

Flexible card primitives for composing any card layout. Built on shadcn Card components.

Primitives

The card system consists of these composable primitives:

Primitive	Description
`Card`	Root container with border and padding
`CardHeader`	Header section
`CardTitle`	Title heading (renders as h3)
`CardDescription`	Subtitle/description text
`CardAction`	Positioned element (e.g., badge over image)
`CardContent`	Main content area
`CardFooter`	Footer section with actions

Composition Patterns

Resource cards

The resource cards used across the Project Exodus website and Bridge — typed badge, cover image, title and a "Read more" link.

Basic resource card

Article

Recognising the signs of relapse

Practical guidance for members and the people supporting them.

With Badge

Show the resource type with a coloured badge:

DownloadPDF · 2.4 MB

Facilitator Handbook

Everything you need to start and run a recovery group.

With metadata

Add the resource type and metadata (read time, file size):

Video12 min watch

Running your first group

A short walkthrough for newly certified facilitators.

Complete Example

All features together:

Article5 min read

Supporting a loved one in recovery

How families and friends can offer steady, healthy support.

Collection

Display multiple resources in a grid:

Article5 min read

Recognising the signs of relapse

Practical guidance for members and supporters.

DownloadPDF

Facilitator Handbook

Everything you need to run a recovery group.

Video12 min

Running your first group

A walkthrough for new facilitators.

Dashboard Stats Cards

Perfect for KPIs, metrics, and analytics.

Basic Stats Card

Active members

1,234

With Trend Indicator

Active members

1,234

+12.5%vs last month

With Icon

Active members

1,234

+12.5%vs last month

With Description

Attendance rate

92%

-3%this week

Across all groups

Dashboard Collection

Active members

1,234

+12.5%vs last month

Groups running

+4this month

Attendance rate

92%

+2.1%this quarter

Testimonial Cards

Perfect for reviews, quotes, and social proof.

Basic Testimonial

This programme changed my life. The support and guidance were incredible.

Sarah Johnson

Programme participant

With Avatar

I highly recommend this to anyone looking to make a positive change.

Michael Chen

Graduate

Class of 2024

With Rating

Outstanding support. The team went above and beyond to help me find my footing in recovery.

Emily Rodriguez

Member

With Title

Life-changing experience

The programme exceeded all my expectations. I learned so much and grew as a person.

David Thompson

Programme alumni

2023 cohort

Testimonial Collection

This programme changed my life. The support and guidance were incredible.

Sarah Johnson

Programme participant

I highly recommend this to anyone looking to make a positive change.

Michael Chen

Graduate

Class of 2024

Building Custom Patterns

The beauty of primitives is flexibility. Create your own patterns:

Horizontal Card

<Card className="flex flex-row">
  <img className="w-48 object-cover" src="..." />
  <div className="flex-1">
    <CardHeader>
      <CardTitle>Title</CardTitle>
      <CardDescription>Description</CardDescription>
    </CardHeader>
  </div>
</Card>

Minimal Card

<Card>
  <CardContent>
    <p>Just some content</p>
  </CardContent>
</Card>

Feature Card

<Card>
  <CardHeader>
    <div className="mb-4 rounded-lg bg-primary p-3 w-fit">
      <Icon className="size-6 text-primary-foreground" />
    </div>
    <CardTitle>Feature Name</CardTitle>
    <CardDescription>
      Description of the feature
    </CardDescription>
  </CardHeader>
</Card>

Pricing Card

<Card>
  <CardHeader>
    <CardTitle>Pro Plan</CardTitle>
    <CardDescription>For professional use</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="text-4xl font-bold">$29</div>
    <p className="text-sm text-muted-foreground">/month</p>
    <ul className="mt-4 space-y-2">
      <li className="flex items-center gap-2">
        <Check className="size-4" />
        <span>Unlimited projects</span>
      </li>
      {/* More features */}
    </ul>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Get Started</Button>
  </CardFooter>
</Card>

API Reference

Card Primitives

All primitives accept standard HTML attributes plus:

Prop	Type	Description
className	string	Additional CSS classes
children	React.ReactNode	Content to render

Composition Tips

CardAction: Absolutely positioned, great for badges over images
CardHeader: Use className="flex flex-row" for horizontal layouts
CardFooter: Perfect for buttons and actions
CardContent: Main content area, use for body text
overflow-hidden: Add to Card when using images for clean edges

Integration with CardCollection

All card patterns work seamlessly with CardCollection:

import { CardCollection } from "@pex/ui-web/data/card-collection";
 
<CardCollection variant="grid" columns={3}>
  <Card>{/* Your composed card */}</Card>
</CardCollection>

Tabs Container Image