Component

Editorial Grid

Centered eyebrow + headline above up to 4 horizontal columns. Each column has an optional small-caps label and body paragraph. 4-col on desktop, 2-col on tablet, stacks to 1-col on mobile. Supports light and dark themes.

Preview

Our Approach

Design that earns trust before it earns attention

Research

Every project begins with understanding — not assumptions. We spend time in the problem space before touching a single pixel.

Craft

Details compound. Typography, spacing, motion, and colour are never arbitrary — each decision is intentional and traceable.

Systems

We build for scale. A well-designed system means the next screen is faster to design and consistent with everything before it.

Outcomes

Design without metrics is decoration. We define success criteria upfront and measure against them — outcomes over opinion.

Dark theme

Process

How we think before we build

Discover

A concise paragraph that captures this phase of the process in plain language.

Define

A concise paragraph that captures this phase of the process in plain language.

Design

A concise paragraph that captures this phase of the process in plain language.

Deliver

A concise paragraph that captures this phase of the process in plain language.

Sanity fields

Available as editorialGrid in the Page builder. Maximum 4 columns.

Prop	Type	Default	Description
headline	string	—	Required. Display headline centered above columns.
eyebrow	string	—	Optional electric-blue mono-caps label above headline.
theme	"light" \| "dark"	"light"	Section colour scheme.
columns[].label	string	—	Optional small-caps column heading.
columns[].body	string	—	Required paragraph body text for each column.

Usage

tsx

import { EditorialGrid } from '@/components/sections/editorial-grid'

<EditorialGrid
  block={{
    _type:   'editorialGrid',
    theme:   'light',
    eyebrow: 'Our Approach',
    headline: 'Design that earns trust before it earns attention',
    columns: [
      { label: 'Research', body: 'Every project begins with understanding...' },
      { label: 'Craft',    body: 'Details compound. Typography, spacing...' },
      { label: 'Systems',  body: 'We build for scale...' },
      { label: 'Outcomes', body: 'Design without metrics is decoration...' },
    ],
  }}
/>

tsx

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