Case Study Card

Case study card with three layouts. Used by the Case Study Carousel (desktop full + mobile hero) and as a standalone single-case-study fallback (mobile tile).

Full layout (desktop carousel)

RewardPay

Product Design, Web App, Fintech

New Qantas Partnership

RewardPay web portal

Redesigning the RewardPay dashboard so small-business owners can track Qantas Points earned, redeem rewards, and manage invoices in one place.

Hero layout (mobile carousel)

New Qantas Partnership

RewardPay web portal

Tile layout (single-case-study mobile)

RewardPay web portal

New Qantas Partnership

Redesigning the RewardPay dashboard so small-business owners can track Qantas Points earned, redeem rewards, and manage invoices in one place.

Props

Prop	Type	Default	Description
`study`*	`CaseStudy`	-	Case study data (matches the Sanity caseStudy type).
`layout`	`"full" \| "hero" \| "tile"`	`"full"`	"full" renders the wide desktop carousel card. "hero" renders the square image-led card used on mobile and in the hero section. "tile" is the compact horizontal tile used as a single-case-study fallback on mobile.
`isActive`	`boolean`	`false`	Only used by the "full" layout — when true, adds the card-carousel-active style used for the centered carousel card.
`onClick`	`(event: MouseEvent) => void`	-	Click handler on the wrapping Link. Used by CaseStudyCarousel to prevent navigation mid-swipe via event.preventDefault().
`className`	`string`	-	Extra classes merged onto the outer Link element.

Import

tsx

import { CaseStudyCard } from '@/components/ui/CaseStudyCard'

Usage

tsx

{/* Desktop carousel card */}
<CaseStudyCard study={study} layout="full" isActive={isActive} />

{/* Mobile / hero section card */}
<CaseStudyCard study={study} layout="hero" />

{/* Compact mobile tile */}
<CaseStudyCard study={study} layout="tile" />