hero.athletic-jersey-number · Jersey number

A hero pattern from Athletic Sport, 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.athletic-jersey-number". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A giant italic number (step 8, link colour) in 10–12 overlaps the top-right corner of a tall athlete photo filling 8–12 for the full hero height; the uppercase italic headline at step 5 fills 1–7 tilted −6°; three slanted stripes in 1–4; subhead, two buttons and the meta line under it.
Slots
index, heroImage, eyebrow, headline, subhead, cta, cta2, meta
Grid areas
stripes 1-4 · number 10-12 · photo 8-12 · headline 1-7 · action 1-7 · meta 9-12 (12-column grid, 1-based inclusive spans)
Notes
Rows: stripes 1, photo 1–4, number 1–2 (top-aligned, painted over the photo's top-right corner like a shirt number), eyebrow 2, headline 3–4 (beside the photo, never over it), action and meta 5.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Explicit rows, ≥90 vh, bottom-aligned. Row 1: three slanted accent stripes in 1–4. Rows 1–5: a tall action photo filling 8–12 for the full hero height (4:5 at phone width) and a giant italic number at step 8 in the link colour, right-aligned in 10–12 and top-aligned on rows 1–2 so it overlaps the photo's top-right corner like a shirt number. Row 2: italic caps eyebrow in 1–6. Rows 3–4: the headline at step 5 (it fills the column; long headlines stay three to five lines), italic caps, weight 900, tilted −6°, in 1–7 beside the photo (never over it). Row 5: subhead, two large buttons and an italic caps meta line stacked in 1–7. Phone: number hidden.

06

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.athletic-jersey-number",
  "kind": "hero",
  "grid": {
    "stripes": "1-4",
    "number": "10-12",
    "photo": "8-12",
    "headline": "1-7",
    "action": "1-7",
    "meta": "9-12"
  },
  "slots": [
    "index",
    "heroImage",
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "meta"
  ],
  "notes": "Rows: stripes 1, photo 1–4, number 1–2 (top-aligned, painted over the photo's top-right corner like a shirt number), eyebrow 2, headline 3–4 (beside the photo, never over it), action and meta 5.",
  "tree": {
    "el": "grid",
    "gap": 2,
    "rowGap": 0,
    "align": "end",
    "minVh": 0.9,
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "rowSpan": "1-1",
        "mobile": "hide",
        "alignSelf": "start",
        "dir": "row",
        "gap": 1,
        "children": [
          {
            "el": "shape",
            "kind": "bar",
            "size": "md",
            "fill": "accent",
            "rotate": -20
          },
          {
            "el": "shape",
            "kind": "bar",
            "size": "md",
            "fill": "accent",
            "rotate": -20
          },
          {
            "el": "shape",
            "kind": "bar",
            "size": "md",
            "fill": "accent",
            "rotate": -20
          }
        ]
      },
      {
        "el": "text",
        "span": "10-12",
        "rowSpan": "1-2",
        "mobile": "hide",
        "color": "link",
        "alignSelf": "start",
        "slot": "index",
        "role": "number",
        "step": 8,
        "align": "right",
        "transform": "uppercase",
        "weight": 900,
        "italic": true,
        "leading": "tight"
      },
      {
        "el": "media",
        "span": "8-12",
        "rowSpan": "1-5",
        "alignSelf": "stretch",
        "slot": "heroImage",
        "aspect": "4/5",
        "treatment": "photo",
        "fill": true
      },
      {
        "el": "text",
        "span": "1-6",
        "rowSpan": "2-2",
        "slot": "eyebrow",
        "role": "eyebrow",
        "transform": "uppercase",
        "weight": 700,
        "italic": true
      },
      {
        "el": "text",
        "span": "1-7",
        "rowSpan": "3-4",
        "slot": "headline",
        "role": "display",
        "step": 5,
        "transform": "uppercase",
        "weight": 900,
        "italic": true,
        "leading": "tight",
        "maxCh": 14,
        "rotate": -6
      },
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "5-5",
        "gap": 3,
        "pad": [
          4,
          0
        ],
        "children": [
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 40
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 2,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg"
              }
            ]
          },
          {
            "el": "text",
            "slot": "meta",
            "role": "label",
            "transform": "uppercase",
            "weight": 700,
            "italic": true
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.athletic-jersey-number.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.athletic-jersey-number — Athletic Sport</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 90vh; padding: 48px 0; align-items: end; grid-template-rows: auto auto 1fr auto auto; overflow: hidden; }
  .stripes { grid-column: 1 / 5; grid-row: 1; align-self: start; }
  .number { grid-column: 9 / 13; grid-row: 1 / 4; justify-self: end; font-size: clamp(180px, 30vw, 420px); color: var(--link); z-index: 0; }
  .photo { grid-column: 8 / 13; grid-row: 1 / 6; aspect-ratio: 4 / 5; align-self: stretch; z-index: 1; }
  .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .eyebrow { grid-column: 1 / 6; grid-row: 2; z-index: 2; }
  h1 { grid-column: 1 / 7; grid-row: 3 / 5; font-size: clamp(64px, 11vw, 190px); max-width: 10ch; rotate: -6deg; transform-origin: left top; padding-left: 0.08em; z-index: 2; }
  .action { grid-column: 1 / 7; grid-row: 5; display: grid; gap: 24px; padding-top: 32px; }
  .action div { display: flex; flex-wrap: wrap; gap: 12px; }
  @media (max-width: 640px) { h1 { font-size: 64px; rotate: -3deg; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="stripes hide-phone" aria-hidden="true"><i></i><i></i><i></i></div>
    <span class="number ic hide-phone" aria-hidden="true">23</span>
    <div class="photo"><img src="https://images.unsplash.com/photo-1546519638-68e109498ffc?w=900" alt="Basketball player rising for a dunk"></div>
    <p class="eyebrow lab">Eastside Hoops · Season 2027</p>
    <h1>Play like it's the final.</h1>
    <div class="action">
      <p>Adult league, youth academy and open courts six nights a week. Tryouts start 3 March.</p>
      <div><a class="btn btn-primary" href="#tryouts">Book a tryout <span>→</span></a><a class="btn" href="#fixtures">Fixtures</a></div>
      <p class="meta lab">Court 4 · Mon–Sat · 6–11pm</p>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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