Component

Text Section

Minimal full-width text block — eyebrow, Cal Sans display headline, optional sub-headline, and an optional CTA button. Three alignment options: left, center, right. Supports dark and light themes via data-theme. Minimum height 320px.

Alignment variants

align="left" · Our story

Photography as discipline

A brief sub-headline that expands on the headline idea.

align="center" · Our story

Photography as discipline

A brief sub-headline that expands on the headline idea.

align="right" · Our story

Photography as discipline

A brief sub-headline that expands on the headline idea.

Themes

theme="light"

Light That Stays

Body text on surface background

theme="dark"

Light That Stays

Body text on dark background

Theme is applied via data-theme on the section element. Global dark mode toggle overrides per-section theme — see the tokens system.

Sanity fields

Available as textSection in the Page builder.

Prop	Type	Default	Description
headline	string	—	Required. Cal Sans display headline.
eyebrow	string	—	Optional mono-caps label above the headline.
subHeadline	string	—	Optional body copy below the headline.
align	left\|center\|right	"center"	Text alignment and flex direction.
theme	"dark" \| "light"	"light"	Section colour scheme.
button.label	string	—	CTA button label.
button.href	string	—	CTA button URL.
button.style	default\|outline\|ghost	"default"	Button variant — maps to Electric blue, outline-muted, or ghost.

Usage

tsx

import { TextSection } from '@/components/sections/text-section'

<TextSection
  block={{
    _type:       'textSection',
    theme:       'light',
    align:       'center',
    eyebrow:     'Our philosophy',
    headline:    'Photography as discipline',
    subHeadline: 'Every frame is a decision, not an accident.',
    button: {
      label: 'View the work',
      href:  '/work',
      style: 'default',
    },
  }}
/>

tsx

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