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
Collections as a ruled index of huge italic names: a tiny number in column 1, the name at step 5 on 2–9, a caps detail bottom-right on 10–12.
Slots
sectionLabel, items[3..6]
Grid areas
number 1-1 · name 2-9 · detail 10-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, then 3–6 collections as a ruled index: a tiny caps number in column 1, the collection name at step 5 in italic Didone on 2–9, and a caps detail (season, piece count) bottom-aligned on 10–12. Hairlines between rows, generous row padding.

What you get

01

Positioning

Included

02

Identity systems

New

03

Websites

Built in

04

Sales enablement

Standard

Layout tree (as in design/layout.json)
{
  "pattern": "features.luxury-collection-index",
  "kind": "features",
  "grid": {
    "number": "1-1",
    "name": "2-9",
    "detail": "10-12"
  },
  "slots": [
    "sectionLabel",
    "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": "text",
        "slot": "sectionLabel",
        "role": "label",
        "transform": "uppercase",
        "tracking": "wide"
      },
      {
        "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-9",
              "slot": "title",
              "role": "h2",
              "step": 5,
              "weight": 400,
              "italic": true,
              "leading": "tight"
            },
            {
              "el": "text",
              "span": "10-12",
              "alignSelf": "end",
              "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; }
  li a { grid-column: 2 / 10; font-size: var(--step-5); font-style: italic; text-decoration: none; transition: opacity 700ms var(--ease); }
  li a:hover { opacity: 0.5; }
  li .d { grid-column: 10 / 13; align-self: end; }
  @media (max-width: 640px) { li a { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="wrap">
  <p class="caps">The collections</p>
  <ol>
    <li class="grid"><span class="caps n">01</span><a class="didone" href="/c/tailoring">Tailoring</a><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="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="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="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