Component

Image Section

Full-width photo block with optional text overlay. Four height presets from 400px to full-viewport. Overlay text can be anchored to bottom-left, center, or bottom-right. Dark gradient scrim auto-applies when overlay content is present.

Height presets

PresetHeightBest used for

small400pxAccent divider, inline image between text sections

medium600pxStandard editorial image (default)

large800pxHero-weight image mid-page

fullscreen100vhFull-viewport impact moment, portfolio cover

Overlay positions

Eyebrow

Headline

Bottom left

Eyebrow

Headline

Center

Eyebrow

Headline

Bottom right

A gradient scrim is automatically added when any overlay content (eyebrow, headline, sub-headline, or button) is present. Without overlay content, the image renders clean with no scrim.

Caption

An optional caption field renders below the image in a small Geist-weight line on the page background color. Useful for photo credits or location context.

Sanity fields

Available as imageSection in the Page builder.

Prop	Type	Default	Description
image	SanityImage	—	Required. Sanity image reference with hotspot support.
height	small\|medium\|large\|fullscreen	"medium"	Height preset for the image container.
caption	string	—	Optional photo caption below the image.
overlay.position	bottom-left\|center\|bottom-right	"center"	Where text overlay is anchored.
overlay.eyebrow	string	—	Small mono-caps label over the photo.
overlay.headline	string	—	Cal Sans headline over the photo.
overlay.subHeadline	string	—	Body copy beneath the headline.
overlay.button.label	string	—	CTA button label — uses frosted glass variant.
overlay.button.href	string	—	CTA button destination URL.
theme	"dark" \| "light"	"light"	Sets data-theme on the wrapper — affects scrim strength.

Usage

tsx

import { ImageSection } from '@/components/sections/image-section'

// Clean image — no overlay
<ImageSection
  block={{
    _type:  'imageSection',
    image:  sanityImageRef,
    height: 'large',
  }}
/>

// With overlay text + CTA
<ImageSection
  block={{
    _type:  'imageSection',
    image:  sanityImageRef,
    height: 'fullscreen',
    overlay: {
      position:    'bottom-left',
      eyebrow:     'Iceland, 2024',
      headline:    'The light before it left',
      subHeadline: 'Shot at 11pm in July — barely dark.',
      button: { label: 'View series', href: '/work/iceland' },
    },
    caption: 'Jökulsárlón glacier lagoon, Iceland',
  }}
/>

tsx

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