Layout tree (as in design/layout.json)
{
"pattern": "features.maximalist-sticker-board",
"kind": "features",
"grid": {
"title": "1-7",
"star": "10-12",
"board": "1-12"
},
"slots": [
"title",
"features[5..8]"
],
"tree": {
"el": "grid",
"gap": 2,
"rowGap": 4,
"align": "center",
"children": [
{
"el": "text",
"span": "1-7",
"slot": "title",
"role": "display",
"step": 5,
"weight": 400,
"leading": "tight",
"maxCh": 16
},
{
"el": "shape",
"span": "10-12",
"mobile": "hide",
"kind": "star",
"size": "xl",
"fill": "accent",
"rotate": 20
},
{
"el": "repeat",
"span": "1-12",
"slot": "features",
"min": 5,
"max": 8,
"layout": "masonry",
"cols": 3,
"gap": 2,
"of": {
"el": "box",
"bg": "surface",
"gap": 2,
"pad": [
3,
3
],
"border": "all",
"children": [
{
"el": "text",
"bg": "accent",
"color": "onAccent",
"slot": "number",
"role": "label",
"transform": "uppercase",
"font": "mono"
},
{
"el": "text",
"slot": "title",
"role": "h3",
"leading": "tight"
},
{
"el": "text",
"slot": "body",
"role": "small",
"maxCh": 40
}
]
}
}
]
}
}Component example: reference/features.maximalist-sticker-board.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.maximalist-sticker-board — Maximalist Collage</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: var(--section) 0; }
.head { align-items: center; margin-bottom: 24px; }
.head h2 { grid-column: 1 / 8; font-size: var(--step-5); max-width: 16ch; }
.head .star { grid-column: 10 / 13; justify-self: center; width: 160px; aspect-ratio: 1; background: var(--accent); rotate: 20deg;
clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.board { columns: 3 260px; column-gap: 12px; }
.scrap { break-inside: avoid; margin-bottom: 12px; display: grid; gap: 12px; }
.scrap h3 { font-size: var(--step-2); }
@media (max-width: 640px) { .head h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="wrap">
<div class="head grid"><h2>What happens in the back room</h2><div class="star hide-phone" aria-hidden="true"></div></div>
<div class="board">
<article class="scrap"><span class="sticker">01</span><h3>Cut</h3><p>Every coat is taken apart at the seams first. We keep the linings.</p></article>
<article class="scrap"><span class="sticker">02</span><h3>Patch</h3><p>Offcuts from forty years of curtains, tablecloths and band T-shirts become pockets, collars and elbows.</p></article>
<article class="scrap"><span class="sticker">03</span><h3>Dye</h3><p>Small batches in the yard, mostly avocado and onion skins.</p></article>
<article class="scrap"><span class="sticker">04</span><h3>Stitch</h3><p>Three machines, one overlocker called Sandra, and a lot of hand-finishing on Sunday nights.</p></article>
<article class="scrap"><span class="sticker">05</span><h3>Label</h3><p>Each piece gets a hand-stamped tag with its old life written on the back.</p></article>
</div>
</section>
</body>
</html>