Component

PhotoCard

A single photo tile with a bottom-gradient overlay showing title and category. Always used as a child of PhotoRow — never sets its own height.

Default

Cascade Range, WA

Landscape

tsx

<PhotoRow height={300}>
  <PhotoCard
    src="..."
    alt="Mountain landscape"
    title="Cascade Range, WA"
    category="Landscape"
  />
</PhotoRow>

Flex weights (asymmetric row)

Wide photo

Landscape

Narrow photo

Portrait

tsx

<PhotoRow height={260} gap={3}>
  <PhotoCard flex={1.6} title="Wide photo"   category="Landscape" ... />
  <PhotoCard flex={1}   title="Narrow photo" category="Portrait"  ... />
</PhotoRow>

Large title (full-bleed)

Columbia River Gorge

Landscape

tsx

<PhotoRow height={420}>
  <PhotoCard titleSize="lg" title="Columbia River Gorge" category="Landscape" ... />
</PhotoRow>

Props

Prop	Type	Default	Description
src	string	—	Image URL (Sanity CDN or Unsplash).
alt	string	—	Accessible image description.
title	string	—	Photo title shown in overlay.
category	string	—	Category tag shown below title.
flex	number	1	Flex weight controlling proportional width.
titleSize	"sm" \| "md" \| "lg"	"md"	Size of the title text. Use "lg" for full-bleed rows.
onClick	() => void	—	Optional click handler — adds hover scale and cursor pointer.