cta.memphis-burst-band · Burst band

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

Rule
A full-bleed accent band: a big star (surfaceAlt) on 1–3, the headline in onAccent at step 6 tilted −2° with a secondary button on 4–10, a cross on 11–12.
Slots
headline, cta
Grid areas
star 1-3 · copy 4-10 · cross 11-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5FA2 · accent2 #9AAE00 · Bricolage Grotesque / DM Sans · radius 12px · space unit 8px (full list in design/tokens.json)
Section
background accent

Pattern notes

  • Section background accent, bleeding edge to edge, with a black 3 px rule top and bottom. A big star in surfaceAlt with a black outline on 1–3, rotated 12°. On 4–10: the headline in onAccent at step 6, heaviest weight, rotated −2°, and an outlined secondary button. A cross in the heading colour on 11–12. At phone width the star shrinks to 80 px and the cross hides.

Have a hard thing to explain?

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.memphis-burst-band",
  "kind": "cta",
  "grid": {
    "star": "1-3",
    "copy": "4-10",
    "cross": "11-12"
  },
  "slots": [
    "headline",
    "cta"
  ],
  "bg": "accent",
  "tree": {
    "el": "grid",
    "gap": 3,
    "align": "center",
    "children": [
      {
        "el": "shape",
        "span": "1-3",
        "kind": "star",
        "size": "xl",
        "fill": "surfaceAlt",
        "rotate": 12
      },
      {
        "el": "box",
        "span": "4-10",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "headline",
            "role": "h2",
            "step": 6,
            "leading": "tight",
            "rotate": -2
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "size": "lg"
          }
        ]
      },
      {
        "el": "shape",
        "span": "11-12",
        "mobile": "hide",
        "kind": "cross",
        "size": "lg",
        "fill": "heading"
      }
    ]
  }
}
Component example: reference/cta.memphis-burst-band.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.memphis-burst-band — Memphis</title>
<link rel="stylesheet" href="base.css">
<style>
  .band { background: var(--pink); border-top: var(--line); border-bottom: var(--line); padding: 104px 0; }
  .band .grid { align-items: center; row-gap: 24px; }
  .star { grid-column: 1 / 4; aspect-ratio: 1; background: var(--ink); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(12deg); position: relative; }
  .star::after { content: ""; position: absolute; inset: 8px; background: var(--sky); clip-path: inherit; }
  .copy { grid-column: 4 / 11; display: grid; gap: 24px; justify-items: start; }
  .copy h2 { font-size: var(--step-6); color: var(--on-pink); transform: rotate(-2deg); }
  .cross { grid-column: 11 / 13; font: 800 96px/1 var(--display); color: var(--ink); justify-self: end; }
  @media (max-width: 640px) { .star { width: 80px; } .copy h2 { font-size: var(--step-3); } .cross { display: none; } }
</style>
</head>
<body>
<section class="band">
  <div class="wrap grid">
    <div class="star" aria-hidden="true"></div>
    <div class="copy"><h2>Throwing a party? We'll bring the sprinkles.</h2><a class="btn secondary" href="/parties">Book a party box</a></div>
    <span class="cross" aria-hidden="true">✕</span>
  </div>
</section>
</body>
</html>

Other patterns in this design

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