Composition Reference

Patterns

Reusable middle-layer structures for assembling clean sections from shared primitives.

Jump to section

Headers

Section Headers

Standard heading compositions for introducing sections, cards, and inner layout groups.

Left

Default

Left-aligned section header

Use this for most page sections and editorial blocks.

Primary action

Center

Focused

Centered section header

Use this above grids, galleries, and comparison groups.

Minimal

Title only header

Title plus copy

Compact intro for smaller inner compositions.

SectionHeaderBlock

Component: @/components/subsections/headers/SectionHeaderBlock

import { SectionHeaderBlock } from "@/components/subsections/headers/SectionHeaderBlock";

<SectionHeaderBlock
  tagline="Default"
  heading="Left-aligned section header"
  description="Optional supporting copy."
  actions={[{ label: "Primary action", href: "/sections" }]}
/>

Spacing

Containers & Vertical Flow

Use containers for width control and restricted Tailwind gaps for predictable vertical rhythm.

container

Default content width

Use this for most sections, grids, and content bands.

<section>
  <div className="tw:container">
    ...
  </div>
</section>

tw:max-w-narrow

Reading width

Use this for articles, legal pages, intro copy, and focused docs.

<div className="tw:max-w-narrow">
  <p className="reference-section-lead tw:reference-section-lead">...</p>
</div>

tw:gap-s

Vertical rhythm utility.

Item oneItem twoItem three

<div className="pattern-flow-s tw:pattern-flow-s">
  ...
</div>

tw:gap-m

Vertical rhythm utility.

Item oneItem twoItem three

<div className="pattern-flow-m tw:pattern-flow-m">
  ...
</div>

tw:gap-l

Vertical rhythm utility.

Item oneItem twoItem three

<div className="pattern-flow-l tw:pattern-flow-l">
  ...
</div>

tw:gap-xl

Vertical rhythm utility.

Item oneItem twoItem three

<div className="pattern-flow-xl tw:pattern-flow-xl">
  ...
</div>

Alignment

Flex Rows

Use flex utilities for compact controls, metadata rows, toolbars, and inline content groups.

Inline group

StrategyFeaturedReact

<div className="pattern-inline-group tw:pattern-inline-group">
  <Badge>Strategy</Badge>
  <Badge tone="primary">Featured</Badge>
</div>

Between row

Plan

Compact row with action.

Live

<div className="pattern-between-row tw:pattern-between-row">
  <div>...</div>
  <Badge tone="success">Live</Badge>
</div>

Centered row

OneTwo

<div className="pattern-centered-row tw:pattern-centered-row">
  ...
</div>

Card layouts

Grids

Use grid utilities when you need repeated cards, feature lists, logo groups, or compact comparisons.

tw:grid tw:md:grid-cols-2

Two equal cards

Useful for comparisons, options, and paired offers.

<div className="section-demo-card-grid-2 tw:section-demo-card-grid-2">
  <Card>...</Card>
  <Card>...</Card>
</div>

tw:grid tw:md:grid-cols-3

Three-card row

Good for benefits, values, services, and proof points.

<div className="section-demo-card-grid-3 tw:section-demo-card-grid-3">
  {items.map((item) => <Card key={item.id}>...</Card>)}
</div>

tw:grid tw:lg:grid-cols-4

Dense catalog

Use for compact catalogs, logos, metrics, and small tiles.

<div className="section-demo-card-grid-4 tw:section-demo-card-grid-4">
  ...
</div>

Editorial layouts

Columns

Use column utilities when content should read as balanced columns rather than independent cards.

Two columns

Left column copy for a narrative introduction or supporting proof.

Right column copy for the paired detail, CTA, or secondary argument.

<div className="pattern-column-stack-md tw:pattern-column-stack-md">
  <div>Left content</div>
  <div>Right content</div>
</div>

Three columns

OneTwoThree

<div className="pattern-column-stack-lg tw:pattern-column-stack-lg">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Layout subsection

Two-Column Split

Reusable left/right wrapper for pairing any two subsection blocks together.

Left block

Works with intros, media, or stats

Keep this side flexible so the same shell can support multiple section families.

Right block

Pair with another subsection

This can hold FAQs, feature lists, pricing summaries, or rich media.

TwoColumnSplit

Component: @/components/subsections/layout/TwoColumnSplit

import { TwoColumnSplit } from "@/components/subsections/layout/TwoColumnSplit";

<TwoColumnSplit
  left={<LeftBlock />}
  right={<RightBlock />}
  align="start"
/>