cta.brutalist-giant-link · Giant link

A cta pattern from Brutalist, 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.brutalist-giant-link". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A full-bleed accent band; the headline in onAccent uppercase at step 6 (two or three lines) is itself the call to action, followed by one underlined link.
Slots
headline, cta
Grid areas
headline full (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)
Section
background accent · full-bleed

Pattern notes

  • Section background accent, bleeding edge to edge, 2 px borders top and bottom. The headline in onAccent, uppercase, step 6, heaviest weight, two or three lines, inset by the page margin (32 px) so the first letter lines up with the content above. Under it one underlined link in onAccent at large size with an arrow. The whole band is clickable. At phone width the headline drops to step 3.

Have a hard thing to explain?

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.brutalist-giant-link",
  "kind": "cta",
  "grid": {
    "headline": "full"
  },
  "slots": [
    "headline",
    "cta"
  ],
  "bg": "accent",
  "bleed": true,
  "tree": {
    "el": "box",
    "gap": 3,
    "pad": [
      5,
      4
    ],
    "children": [
      {
        "el": "text",
        "color": "onAccent",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "transform": "uppercase",
        "leading": "tight"
      },
      {
        "el": "button",
        "color": "onAccent",
        "slot": "cta",
        "variant": "underline",
        "size": "lg",
        "arrow": true
      }
    ]
  }
}
Component example: reference/cta.brutalist-giant-link.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.brutalist-giant-link — Brutalist</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: var(--accent); color: var(--on-accent); border-top: var(--line); border-bottom: var(--line); padding: 32px var(--gutter); display: block; text-decoration: none; }
  .band h2 { font-size: clamp(48px, 9vw, var(--step-6)); }
  .band span { display: inline-block; margin-top: 16px; font-size: var(--step-1); text-decoration: underline; }
  .band:hover h2 { text-decoration: underline; }
</style>
</head>
<body>
<a class="band" href="/mailing-list">
  <h2>Get the next record first</h2>
  <span>Join the mailing list →</span>
</a>
</body>
</html>

Other patterns in this design

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