hero.luxury-campaign-diptych · Campaign diptych

A hero pattern from Luxury Fashion, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.luxury-campaign-diptych". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two tall campaign photographs edge to edge across the grid (1–6, 7–12), then a tiny-caps line and the campaign title in huge italic Didone, centred beneath.
Slots
gallery1, gallery2, eyebrow, headline, cta
Grid areas
left 1-6 · right 7-12 · title 1-12 · action 5-8 (12-column grid, 1-based inclusive spans)
Notes
The two images touch (8 px gap at most) and are the same height. At phone width show them side by side at half width, not stacked.
Tokens
bg #FAF8F4 · text #1A1A1A · heading #0A0A0A · accent #111111 · accent2 #5C4311 · Bodoni Moda / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 4

Pattern notes

  • Two 4:5 campaign photographs edge to edge across the grid (1–6 and 7–12, gap 8 px at most, same height). Below them, centred: a tiny caps eyebrow (season or collection), the campaign title at step 6 in italic Didone weight 400, and a small underline caps link centred beneath. The hero is full-bleed; at phone width the two photos stay side by side at half width, never stacked or dropped.

Brand & product studio

We make complicated companies simple to choose

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.luxury-campaign-diptych",
  "kind": "hero",
  "grid": {
    "left": "1-6",
    "right": "7-12",
    "title": "1-12",
    "action": "5-8"
  },
  "slots": [
    "gallery1",
    "gallery2",
    "eyebrow",
    "headline",
    "cta"
  ],
  "notes": "The two images touch (8 px gap at most) and are the same height. At phone width show them side by side at half width, not stacked.",
  "bleed": true,
  "tree": {
    "el": "grid",
    "gap": 1,
    "rowGap": 4,
    "children": [
      {
        "el": "grid",
        "span": "1-12",
        "rowSpan": "1-1",
        "mobile": "keep",
        "gap": 1,
        "children": [
          {
            "el": "media",
            "span": "1-6",
            "slot": "gallery1",
            "aspect": "4/5",
            "treatment": "photo"
          },
          {
            "el": "media",
            "span": "7-12",
            "slot": "gallery2",
            "aspect": "4/5",
            "treatment": "photo"
          }
        ]
      },
      {
        "el": "text",
        "span": "1-12",
        "rowSpan": "2-2",
        "slot": "eyebrow",
        "role": "label",
        "align": "center",
        "transform": "uppercase",
        "tracking": "wide"
      },
      {
        "el": "text",
        "span": "1-12",
        "rowSpan": "3-3",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "align": "center",
        "weight": 400,
        "italic": true,
        "tracking": "tight",
        "leading": "tight"
      },
      {
        "el": "box",
        "span": "1-12",
        "rowSpan": "4-4",
        "align": "center",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "underline",
            "size": "sm"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.luxury-campaign-diptych.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.luxury-campaign-diptych — Luxury Fashion</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { padding: calc(var(--unit) * 4) 0 var(--section); }
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pair figure { aspect-ratio: 4 / 5; margin: 0; overflow: hidden; }
  .title { text-align: center; display: grid; gap: calc(var(--unit) * 4); justify-items: center; padding-top: calc(var(--unit) * 6); }
  .title h1 { font-size: var(--step-6); font-style: italic; }
  @media (max-width: 640px) { .title h1 { font-size: var(--step-4); } }
</style>
</head>
<body>
<section class="hero">
  <div class="pair">
    <figure class="reveal"><img src="https://picsum.photos/seed/look1/1200/1500" alt="Model in a long black wool coat against a limestone wall" width="1200" height="1500"></figure>
    <figure class="reveal"><img src="https://picsum.photos/seed/look2/1200/1500" alt="Close crop of an ivory silk shirt collar" width="1200" height="1500"></figure>
  </div>
  <div class="title wrap">
    <p class="caps">Autumn — Winter 2027</p>
    <h1 class="didone">L'Hiver Clair</h1>
    <a class="ulink" href="/collections/aw27">Discover the collection</a>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page