Layout tree (as in design/layout.json)
{
"pattern": "cta.frosted-aurora-panel",
"kind": "cta",
"grid": {
"field": "1-12",
"panel": "2-8"
},
"slots": [
"image",
"headline",
"body",
"newsletter"
],
"tree": {
"el": "grid",
"gap": 4,
"pad": [
8,
0
],
"minVh": 0.55,
"children": [
{
"el": "media",
"span": "1-12",
"rowSpan": "1-1",
"slot": "image",
"treatment": "gradient-mesh",
"fill": true,
"frame": "rounded"
},
{
"el": "box",
"span": "2-8",
"rowSpan": "1-1",
"bg": "surface",
"alignSelf": "center",
"gap": 3,
"pad": [
6,
5
],
"border": "all",
"children": [
{
"el": "text",
"slot": "headline",
"role": "h2",
"step": 4,
"weight": 600,
"tracking": "tight",
"maxCh": 22
},
{
"el": "text",
"color": "textMuted",
"slot": "body",
"role": "body",
"maxCh": 44
},
{
"el": "form",
"slot": "newsletter",
"fields": [
"email"
],
"inline": true
}
]
}
]
}
}Component example: reference/cta.frosted-aurora-panel.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.frosted-aurora-panel — Frosted Glass</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: calc(var(--unit) * 8) 0; }
.stage { min-height: 55vh; padding: calc(var(--unit) * 8) 0; align-items: center; }
.field { grid-column: 1 / 13; grid-row: 1; align-self: stretch; border-radius: var(--radius);
background: radial-gradient(60% 80% at 15% 30%, var(--accent), transparent 70%), radial-gradient(50% 70% at 85% 70%, var(--accent2), transparent 70%), var(--surface);
animation: drift 18s var(--ease) infinite alternate; background-size: 140% 140%; }
@keyframes drift { to { background-position: 100% 50%; } }
.panel { grid-column: 2 / 9; grid-row: 1; padding: calc(var(--unit) * 6) calc(var(--unit) * 5); display: grid; gap: calc(var(--unit) * 3); }
.panel h2 { font-size: var(--step-4); max-width: 22ch; }
form { display: flex; gap: 8px; flex-wrap: wrap; }
input { flex: 1 1 220px; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--frost-alt); color: var(--heading); font: inherit; }
@media (max-width: 640px) { .field { grid-row: 1 !important; } .panel { grid-row: 1 !important; margin: 16px; } .panel h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="wrap">
<div class="stage grid">
<div class="field" aria-hidden="true"></div>
<div class="panel glass">
<h2>Close the month in a morning.</h2>
<p class="muted">Get early access. We onboard ten finance teams a week.</p>
<form><label class="eyebrow" for="email" hidden>Work email</label><input id="email" type="email" placeholder="you@company.com" required><button class="btn" type="submit">Request access</button></form>
</div>
</div>
</section>
</body>
</html>