features.luxury-collection-index · Collection index

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

Rule
A ruled index of 3–6 collections: caps number on 1, the name at step 5 in italic Didone on 2–7, a muted description on 8–10, a caps detail on 11–12.
Slots
sectionLabel, title, items[3..6]
Grid areas
number 1-1 · name 2-7 · description 8-10 · detail 11-12 (12-column grid, 1-based inclusive spans)
Notes
On hover, a small image of the collection may follow the cursor; never show it as a thumbnail column.
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)

Pattern notes

  • A caps section label on the left and an italic h3 (step 3) on the right of one baseline, then 3–6 collections as a ruled index: a caps number in column 1, the collection name at step 5 in italic Didone on 2–7, a muted one-line description on 8–10 (max 34 ch) and a caps detail (season, piece count) on 11–12. Hairlines between rows, step-4 row padding. Phone: number, name, description and detail stack.

What you get

What we do

01

Positioning

Find the one sentence your best customers already believe.

Included

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

New

03

Websites

Fast, editable sites built on the CMS your team already knows.

Built in

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

Standard

Layout tree (as in design/layout.json)
{
  "pattern": "features.luxury-collection-index",
  "kind": "features",
  "grid": {
    "number": "1-1",
    "name": "2-7",
    "description": "8-10",
    "detail": "11-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "items[3..6]"
  ],
  "notes": "On hover, a small image of the collection may follow the cursor; never show it as a thumbnail column.",
  "tree": {
    "el": "box",
    "gap": 4,
    "children": [
      {
        "el": "box",
        "mobile": "keep",
        "dir": "row",
        "gap": 3,
        "align": "baseline",
        "justify": "between",
        "wrap": true,
        "children": [
          {
            "el": "text",
            "slot": "sectionLabel",
            "role": "label",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h3",
            "step": 3,
            "weight": 400,
            "italic": true
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "items",
        "min": 3,
        "max": 6,
        "layout": "list",
        "divider": true,
        "of": {
          "el": "grid",
          "gap": 3,
          "pad": [
            4,
            0
          ],
          "align": "baseline",
          "children": [
            {
              "el": "text",
              "span": "1-1",
              "slot": "number",
              "role": "label",
              "transform": "uppercase",
              "tracking": "wide"
            },
            {
              "el": "text",
              "span": "2-7",
              "slot": "title",
              "role": "h2",
              "step": 5,
              "weight": 400,
              "italic": true,
              "leading": "tight"
            },
            {
              "el": "text",
              "span": "8-10",
              "color": "textMuted",
              "slot": "body",
              "role": "body",
              "maxCh": 34
            },
            {
              "el": "text",
              "span": "11-12",
              "slot": "meta",
              "role": "label",
              "transform": "uppercase",
              "tracking": "wide"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.luxury-collection-index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.luxury-collection-index — Luxury Fashion</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  ol { list-style: none; padding: 0; margin-top: calc(var(--unit) * 4); }
  li { border-top: 1px solid var(--border); padding: calc(var(--unit) * 4) 0; align-items: baseline; }
  li:last-child { border-bottom: 1px solid var(--border); }
  li .n { grid-column: 1 / 2; }
  .head { display: flex; justify-content: space-between; align-items: baseline; }
  .head h2 { font-size: var(--step-3); font-style: italic; }
  li a { grid-column: 2 / 8; font-size: var(--step-5); font-style: italic; text-decoration: none; transition: opacity 700ms var(--ease); }
  li a:hover { opacity: 0.5; }
  li .t { grid-column: 8 / 11; max-width: 34ch; }
  li .d { grid-column: 11 / 13; }
  @media (max-width: 640px) { li a { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="head"><p class="caps">The collections</p><h2 class="didone">Autumn–Winter 2027</h2></div>
  <ol>
    <li class="grid"><span class="caps n">01</span><a class="didone" href="/c/tailoring">Tailoring</a><span class="muted t">Cut in Biella wool, finished by hand in the Milan atelier.</span><span class="caps muted d">42 pieces · AW27</span></li>
    <li class="grid"><span class="caps n">02</span><a class="didone" href="/c/knitwear">Knitwear</a><span class="muted t">Cashmere and merino from a single Mongolian cooperative.</span><span class="caps muted d">18 pieces · AW27</span></li>
    <li class="grid"><span class="caps n">03</span><a class="didone" href="/c/leather">Leather goods</a><span class="muted t">Vegetable-tanned calf, stitched with linen thread.</span><span class="caps muted d">27 pieces · Permanent</span></li>
    <li class="grid"><span class="caps n">04</span><a class="didone" href="/c/eveningwear">Eveningwear</a><span class="muted t">Silk faille and duchesse satin, made to measure.</span><span class="caps muted d">12 pieces · By appointment</span></li>
  </ol>
</section>
</body>
</html>

Other patterns in this design

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