CardsStable

Case Card

Sourcecomponents/cards/CaseCard.astro

Overview

A deep, self-contained case-study card — the face used in the 3D carousel deck, shown here static. A tag, company, a mixed sans + serif-italic title, an image strip, and an outlined CTA.

Case study

Company Name

A one-line case-study headline

Explore

Case study

Company Name

Another case-study headline

Explore

Props

Prop	Type	Default	Notes
`company`	string	`—`	Client / company. Required.
`title`	string	`—`	Title (supports <em> for serif-italic). Required.
`tag`	string	`'Case study'`	Small badge at the top.
`image`	string	`—`	Image strip URL.
`cta`	string	`'Explore'`	Outlined button label.
`href`	string	`—`	Links the whole card.

Usage

Fixed-width by design so a row reads as a deck. Wrap the accent word in <em>.

<CaseCard
  company="Company Name"
  title="A one-line case-study <em>headline</em>"
  image="/img/example.jpg"
  href="#"
/>

Rules

Use it for a featured, immersive case-study showcase.

Keep titles to ~3 lines — the height is reserved for it.

Don't

Use it for a dense grid — for that use Work Card.

Stretch it to full width — it’s a deck card.