Component

Project Details Section

Two-column section: display headline + description on the left, a compact key–value list on the right. Used for case studies, project credits, and spec sheets. Supports light and dark themes.

Preview

Case Study

Coastal Aerial Series

A ten-day expedition along the Pacific coastline, capturing the interplay of light, water, and geological formation from above.

Project Duration: 10 Days
Role: Photographer & Director
Location: Pacific Coast, CA
Year: 2025

Case Study

Coastal Aerial Series

A ten-day expedition along the Pacific coastline, capturing the interplay of light, water, and geological formation from above.

Project Duration: 10 Days
Role: Photographer & Director
Location: Pacific Coast, CA
Year: 2025

Sanity fields

Available as projectDetailsSection in the Page builder.

Prop	Type	Default	Description
headline	string	—	Required. Display headline in left column.
eyebrow	string	—	Optional mono-caps label above the headline.
description	text	—	Optional body copy below the headline.
details	array	[]	Array of { label, value } rows in the right column.
theme	"light" \| "dark"	"light"	Section colour scheme.

Usage

tsx

import { ProjectDetailsSection } from '@/components/sections/project-details-section'

<ProjectDetailsSection
  block={{
    _type:       'projectDetailsSection',
    theme:       'light',
    eyebrow:     'Case Study',
    headline:    'Coastal Aerial Series',
    description: 'A ten-day expedition along the Pacific coastline.',
    details: [
      { label: 'Project Duration', value: '10 Days' },
      { label: 'Role',             value: 'Photographer & Director' },
      { label: 'Location',         value: 'Pacific Coast, CA' },
      { label: 'Year',             value: '2025' },
    ],
  }}
/>

tsx

// Via Sanity BlockRenderer — no extra code needed.
// Add to a Page document in Studio:
// Sections → Add item → Project Details