cta.maximalist-everything-band · Everything band

A cta pattern from Maximalist Collage, 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.maximalist-everything-band". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A full-bleed accent band: a marquee on top, the tilted step-7 headline in 1–8, the line and two buttons in 9–12, a star sticker in 11–12.
Slots
tagline, headline, body, cta, cta2
Grid areas
headline 1-8 · action 9-12 · star 11-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5A1F · accent2 #00B671 · Abril Fatface / Syne · radius 4px · space unit 6px (full list in design/tokens.json)
Section
background accent · full-bleed · vertical padding step 6

Pattern notes

  • Full-bleed accent band, 36 px top and bottom. A marquee of the tagline (h2 size, onAccent) on top; then the headline at step 7 tilted −2° in 1–8, the line as a lead and two large buttons (secondary, ghost) in 9–12, and an accent2 star in 11–12.
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites

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 projectRead case studies
Layout tree (as in design/layout.json)
{
  "pattern": "cta.maximalist-everything-band",
  "kind": "cta",
  "grid": {
    "headline": "1-8",
    "action": "9-12",
    "star": "11-12"
  },
  "slots": [
    "tagline",
    "headline",
    "body",
    "cta",
    "cta2"
  ],
  "bg": "accent",
  "bleed": true,
  "tree": {
    "el": "box",
    "gap": 4,
    "children": [
      {
        "el": "marquee",
        "color": "onAccent",
        "slot": "tagline",
        "role": "h2"
      },
      {
        "el": "grid",
        "gap": 2,
        "align": "center",
        "children": [
          {
            "el": "text",
            "span": "1-8",
            "color": "onAccent",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 400,
            "leading": "tight",
            "maxCh": 14,
            "rotate": -2
          },
          {
            "el": "box",
            "span": "9-12",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "onAccent",
                "slot": "body",
                "role": "lead",
                "maxCh": 30
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 2,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "secondary",
                    "size": "lg"
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "ghost",
                    "size": "lg"
                  }
                ]
              }
            ]
          },
          {
            "el": "shape",
            "span": "11-12",
            "mobile": "hide",
            "kind": "star",
            "size": "md",
            "fill": "accent2",
            "rotate": -15
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.maximalist-everything-band.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.maximalist-everything-band — Maximalist Collage</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: var(--accent); color: var(--on-accent); padding: 36px 0; }
  .band .marquee { font: 400 var(--step-2)/1 var(--font-heading); border-block: var(--ink); margin-bottom: 30px; }
  .row { align-items: center; row-gap: 24px; }
  .band h2 { grid-column: 1 / 9; color: var(--on-accent); font-size: var(--step-5); max-width: 14ch; rotate: -2deg; }
  .act { grid-column: 9 / 13; display: grid; gap: 18px; }
  .act div { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn-ghost { background: transparent; box-shadow: none; }
  @media (max-width: 640px) { .band h2 { font-size: var(--step-3); rotate: -1deg; } }
</style>
</head>
<body>
<section class="band">
  <div class="marquee" aria-hidden="true"><span>Swap shop every first Saturday ✶ Bring a bag, leave with a bag ✶ Swap shop every first Saturday ✶</span></div>
  <div class="wrap row grid">
    <h2>Bring your worst jumper.</h2>
    <div class="act"><p>We will cut it up, patch it and hand it back on Sunday. £25, coffee included.</p>
      <div><a class="btn" href="#book">Book a slot</a><a class="btn btn-ghost" href="#how">How it works</a></div></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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