Layout tree (as in design/layout.json)
{
"pattern": "content.seventies-flowing-column",
"kind": "content",
"grid": {
"panel": "2-11"
},
"slots": [
"sectionLabel",
"title",
"body",
"body2",
"cta"
],
"tree": {
"el": "grid",
"gap": 4,
"children": [
{
"el": "box",
"span": "2-11",
"bg": "surface",
"gap": 5,
"pad": [
8,
8
],
"align": "center",
"children": [
{
"el": "text",
"color": "link",
"slot": "sectionLabel",
"role": "label",
"align": "center"
},
{
"el": "text",
"slot": "title",
"role": "h2",
"step": 5,
"align": "center",
"tracking": "tight",
"leading": "tight",
"maxCh": 16
},
{
"el": "divider",
"weight": 8
},
{
"el": "text",
"slot": "body",
"role": "lead",
"step": 1,
"align": "center",
"maxCh": 50
},
{
"el": "text",
"slot": "body2",
"role": "body",
"align": "center",
"maxCh": 58
},
{
"el": "button",
"slot": "cta",
"variant": "primary",
"size": "lg"
}
]
}
]
}
}Component example: reference/content.seventies-flowing-column.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>content.seventies-flowing-column — Seventies Psychedelic</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: calc(var(--unit) * 8) 0; }
.col { grid-column: 2 / 12; background: var(--surface); border-radius: var(--radius); padding: calc(var(--unit) * 10) calc(var(--unit) * 8); display: grid; gap: calc(var(--unit) * 5); text-align: center; justify-items: center; }
.col > p { max-width: 58ch; }
.col .label { color: var(--link); font-weight: 800; }
.col h2 { font-size: clamp(48px, 8vw, var(--step-5)); line-height: 0.95; max-width: 16ch; }
.col .wave { width: 240px; }
.col .lead { font-size: var(--step-1); line-height: 1.35; max-width: 46ch; }
.col a { background: var(--accent); color: var(--on-accent); font-weight: 800; border-radius: 999px; padding: 16px 32px; text-decoration: none; }
@media (max-width: 640px) { .col { padding: calc(var(--unit) * 6) calc(var(--unit) * 4); } }
</style>
</head>
<body>
<section class="wrap">
<div class="grid">
<div class="col">
<p class="label">Our story</p>
<h2>It started with one crate of records</h2>
<div class="wave" aria-hidden="true"></div>
<p class="lead">In 2019 we bought a bakery, a crate of 600 records and a hi-fi older than both of us.</p>
<p>We kept the bakery's tiles and ovens, built a bar from the old flour bins and opened with a single turntable. Five years on there are three, and the crate has become a wall.</p>
<a href="#visit">Plan your visit →</a>
</div>
</div>
</section>
</body>
</html>