Design System · DS-003

LagoContentCard

Internal QA/reference page for the canonical LAGO content container. Every example uses the real production LagoContentCard component. Not linked from any product navigation.

Variants & Media

DS-003 LagoContentCard — the canonical shared content container. 12px radius, 1px semantic border, white surface, no default shadow. Media is flush to the card edge (0px gap).

Default (24px padding)

Sunset Kayak Tour

Muskoka, ON

A guided 2-hour sunset paddle through the lakes of Muskoka.

Fishing Charter

Kawarthas, ON

Half-day charter with a licensed captain. Rods and bait provided.

Pontoon Rental

Lake Rosseau

Full-day pontoon rental. Seats up to 10 guests comfortably.

Compact (16px padding)

For dense layouts — lists, search results, side panels.

Booking #1042

ConfirmedSarah Chen

Booking #1043

PendingMike Patel

Booking #1044

CompletedEmma Wilson

Interactive

Hover, pressed, focus-visible via the interactive prop or onClick. Visible focus ring is teal.

Click me

Hover to see the subtle surface change. Click to see the pressed state.

Tab to me to see the focus ring.

Navigation card

Polymorphic — as={Link} for navigation.

Renders as a router Link.

Media — flush to card edge

0px image-to-border gap. 16:9 default. object-fit cover. Card overflow-hidden clips the top corners to the 12px radius. Content padding begins below the media.

Sunset Kayak Tour

Muskoka, ON

$99 / person

Fishing Charter

Kawarthas, ON

Half-day charter with a licensed captain.

$450 / group

Pontoon Rental

Lake Rosseau

Full-day rental. Seats up to 10.

Note:Media touches the card edge with zero inset gap. The card's overflow-hidden rounded-xl clips the media's top corners to the 12px radius. No inner padding around the image.

Anatomy, Footer, Responsive & Accessibility

The full anatomy of LagoContentCard — title, metadata, description, divider, footer, children — plus responsive and accessibility behavior.

Anatomy — all props

Experience title

Metadata line

Supporting description text that gives context to the card content.

Children content sits between description and footer.

Footer / actions

Footer pins to the bottom (mt-auto). Use DS-001 Button for actions.

With footer actions

Footer actions align to the card bottom.

With divider + footer

The divider separates content from footer.

$396.00

Responsive

Card grids collapse to fewer columns on narrow screens. Actions may stack beneath the title on mobile.

Card 1

Grid collapses 4→2→1 columns.

Card 2

Grid collapses 4→2→1 columns.

Card 3

Grid collapses 4→2→1 columns.

Card 4

Grid collapses 4→2→1 columns.

Accessibility

Interactive cards: clear semantics + keyboard access (button/Link)
Visible focus: teal ring (ring-lago-border-focus) on keyboard navigation
Status: never colour alone — use DS-009 LagoStatusBadge (icon + label + colour)
No competing controls: don't make the entire card clickable if it contains competing interactive controls

Reference

Component: src/components/lago/LagoContentCard.jsx

Geometry: 12px radius (rounded-xl), 1px border, no default shadow

Padding: 24px default (p-6) / 16px compact (p-4)

Media: flush 16:9, object-fit cover, 0px gap to border

Dependencies: DS-001 Button (footer/action), DS-002 Lucide, DS-009 LagoStatusBadge

Note:The existing src/components/ui/card.jsx primitive is unchanged — 41 consumers unaffected. LagoContentCard is the canonical DS-003 implementation.

Mobile Overflow Containment

Regression specimen for narrow viewports (320–430px). Long unbreakable strings, multiple actions, and flush media must remain fully inside the card. No horizontal page scroll.