cta.athletic-finish-line · Finish line

A cta pattern from Athletic Sport, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 7. Give the section root data-pattern="cta.athletic-finish-line". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A full-bleed accent band: three slanted onAccent stripes in 1–4, the headline at step 7 tilted −4° in 1–8, the line and a secondary button in 9–12.
Slots
headline, body, cta
Grid areas
stripes 1-4 · headline 1-8 · action 9-12 (12-column grid, 1-based inclusive spans)
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
background accent · full-bleed · vertical padding step 8

Pattern notes

  • A full-bleed accent band: three slanted onAccent stripes in 1–4, then the headline at step 7 (italic caps, onAccent, rotate −4°) in 1–8, bottom-aligned with a line and a secondary button in 9–12 (never let the button run past the band's right edge).

Have a hard thing to explain?

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.athletic-finish-line",
  "kind": "cta",
  "grid": {
    "stripes": "1-4",
    "headline": "1-8",
    "action": "9-12"
  },
  "slots": [
    "headline",
    "body",
    "cta"
  ],
  "bg": "accent",
  "bleed": true,
  "tree": {
    "el": "grid",
    "gap": 2,
    "rowGap": 3,
    "align": "end",
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "mobile": "hide",
        "dir": "row",
        "gap": 1,
        "children": [
          {
            "el": "shape",
            "kind": "bar",
            "size": "md",
            "fill": "onAccent",
            "rotate": -20
          },
          {
            "el": "shape",
            "kind": "bar",
            "size": "md",
            "fill": "onAccent",
            "rotate": -20
          },
          {
            "el": "shape",
            "kind": "bar",
            "size": "md",
            "fill": "onAccent",
            "rotate": -20
          }
        ]
      },
      {
        "el": "text",
        "span": "1-8",
        "color": "onAccent",
        "slot": "headline",
        "role": "display",
        "step": 7,
        "transform": "uppercase",
        "weight": 900,
        "italic": true,
        "leading": "tight",
        "maxCh": 14,
        "rotate": -4
      },
      {
        "el": "box",
        "span": "9-12",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "body",
            "role": "body",
            "maxCh": 32
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "size": "md",
            "arrow": true
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.athletic-finish-line.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.athletic-finish-line — Athletic Sport</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: var(--accent); color: var(--on-accent); padding: 64px 0; overflow: hidden; }
  .band .grid { align-items: end; row-gap: 24px; }
  .band .stripes { grid-column: 1 / 5; } .band .stripes i { background: var(--on-accent); }
  .band h2 { grid-column: 1 / 10; color: var(--on-accent); font-size: clamp(56px, 9vw, 150px); max-width: 14ch; rotate: -4deg; transform-origin: left bottom; }
  .act { grid-column: 10 / 13; display: grid; gap: 24px; }
  .act .btn { border-color: var(--on-accent); color: var(--on-accent); justify-self: start; }
  @media (max-width: 640px) { .band h2 { font-size: 56px; rotate: -2deg; } }
</style>
</head>
<body>
<section class="band">
  <div class="wrap grid">
    <div class="stripes hide-phone" aria-hidden="true"><i></i><i></i><i></i></div>
    <h2>Tryouts close Friday.</h2>
    <div class="act"><p>Twelve spots in the senior squad. Bring your shoes and your best five minutes.</p><a class="btn" href="#tryouts">Sign up <span>→</span></a></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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