Component

Detail Page Header

Editorial two-column section header — large Cal Sans headline and subheadline on the left, two labeled metadata blocks on the right. Pairs cleanly above a bento grid or full-bleed image.

Preview

Carolina Premier Soccer League

A full brand identity for a dual-state sports organization spanning North and South Carolina — from crest design to kit, signage, and digital applications.

Year

2025

Delivered over a four-month engagement, launched ahead of the spring season.

Layout anatomy

A 2-column CSS grid at lg (50/50). The left column holds the headline + subheadline. The right column holds two labeled metadata blocks in a flex row, right-aligned at lg. Below lg everything stacks to a single column — meta blocks switch to flex-col below sm, row above. The vertical divider between meta blocks is hidden on mobile.

col 1 — 50%headline + sub

col 2 — 50%

block 1

block 2

tsx

// Desktop: 2-col grid, meta blocks right-aligned
// Mobile: single column, meta blocks stacked
<div className="grid lg:grid-cols-2 items-center">
  <div className="flex flex-col"> {/* headline + subheadline */}
  <div className="flex flex-col sm:flex-row lg:justify-end"> {/* 2 meta blocks */}
</div>

Pairing

The component has no bottom border or shadow — it's designed to sit directly above a bento grid or full-bleed image block with the standard gallery gap between them.

Bento Grid or Full-Bleed Image

Sanity fields

Available as detailPageHeaderSection in the Page builder. Add it at the top of a page's sections array, then follow it with an image or bento grid block.

Prop	Type	Default	Description
headline	string	—	Project or page title. Rendered in Cal Sans 600. Required.
subheadline	text	—	One or two sentences describing the project.
firstBlock.label	string	—	Label for the first metadata block — e.g. "Year".
firstBlock.value	string	—	Primary value — e.g. "2024".
firstBlock.body	text	—	Optional supporting copy below the value.
secondBlock.label	string	—	Label for the second metadata block — e.g. "Category".
secondBlock.value	string	—	Primary value — e.g. "Brand Identity".
secondBlock.body	text	—	Optional supporting copy below the value.

Usage

tsx

// Direct component usage
import { DetailPageHeader } from '@/components/sections/detail-page-header'

<DetailPageHeader
  block={{
    _type: 'detailPageHeaderSection',
    headline: 'Carolina Premier Soccer League',
    subheadline: 'A full brand identity for a dual-state organization.',
    firstBlock:  { label: 'Year',     value: '2025', body: 'Spring season launch.' },
    secondBlock: { label: 'Category', value: 'Brand Identity', body: 'Identity, motion, digital.' },
  }}
/>

tsx

// Via Sanity BlockRenderer (apps/web/components/sections/block-renderer.tsx)
// No extra code needed — detailPageHeaderSection is handled automatically.

// Add to a Page document in Studio:
// Sections → Add item → Detail Page Header