Component

Content Section

Editorial two-column page section — eyebrow, Cal Sans headline, and intro copy span the full width, then a sub-headline and two body copy columns sit left, with a staggered 2×2 photo grid right. Optional inline stats (2-col dashed grid) appear below the body copy.

Layout structure

Full-width header

Left — body copy

Right — staggered 2×2 photos

Odd-indexed photos (cols 2 and 4) are offset upward — -mt-40 on large screens — creating a staggered depth effect.

Optional regions

FieldBehaviour when omitted

eyebrowAccent label hidden

introIntro paragraph hidden — headline sits directly above the two-column area

subHeadlineSub-headline hidden; body copy starts at top of left column

body2Second body paragraph omitted

photoGridRight column collapses — layout becomes single column

statsStats area hidden entirely

statsEyebrowStats section renders without a label above it

Sanity fields

Available as contentSection in the Page builder.

Prop	Type	Default	Description
eyebrow	string	—	Small mono-caps accent label.
headline	string	—	Cal Sans full-width display headline.
intro	string	—	Wide intro paragraph beneath the headline.
subHeadline	string	—	Smaller Cal Sans headline in the left column.
body1	string	—	First body copy paragraph.
body2	string	—	Second body copy paragraph.
statsEyebrow	string	—	Label above the inline stats grid.
stats	statItem[]	—	Up to 4 stats — value + label pairs.
photoGrid	image[]	—	Up to 4 Sanity images for the staggered right-column grid. Aliased from images[] in GROQ.

⚠️ GROQ note: this field is projected as "photoGrid": images[] to avoid collision with other section types that also use images[]. Always use block.photoGrid in the component, not block.images.

Usage

tsx

import { ContentSection } from '@/components/sections/content-section'

<ContentSection
  block={{
    _type:       'contentSection',
    eyebrow:     'Our approach',
    headline:    'Photography as a discipline',
    intro:       'We treat every frame as a decision, not an accident.',
    subHeadline: 'Light first. Everything else second.',
    body1:       'Long-form body copy goes here...',
    statsEyebrow: 'By the numbers',
    stats: [
      { value: '12 years', label: 'In the field' },
      { value: '40,000+',  label: 'Images delivered' },
    ],
    photoGrid: [], // Sanity image references
  }}
/>

tsx

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