Layout tree (as in design/layout.json)
{
"pattern": "list.broadsheet-briefs",
"kind": "list",
"grid": {
"flag": "1-12",
"items": "1-12"
},
"slots": [
"sectionLabel",
"items[3..6]"
],
"tree": {
"el": "box",
"gap": 2,
"children": [
{
"el": "text",
"slot": "sectionLabel",
"role": "h4",
"step": 3,
"font": "heading"
},
{
"el": "divider",
"weight": 2
},
{
"el": "repeat",
"slot": "items",
"min": 3,
"max": 6,
"layout": "grid",
"cols": 3,
"gap": 3,
"divider": true,
"of": {
"el": "box",
"gap": 1,
"children": [
{
"el": "text",
"color": "link",
"slot": "meta",
"role": "label",
"transform": "uppercase",
"weight": 700,
"tracking": "wide"
},
{
"el": "text",
"slot": "title",
"role": "h4",
"step": 2,
"weight": 700,
"leading": "tight",
"font": "body"
},
{
"el": "text",
"slot": "body",
"role": "body",
"font": "body"
}
]
}
}
]
}
}Component example: reference/list.broadsheet-briefs.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.broadsheet-briefs — Broadsheet Newspaper</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: calc(var(--unit) * 12) 0; display: grid; gap: calc(var(--unit) * 2); }
.flag { font-size: var(--step-3); text-align: left; }
.items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; }
.items li { padding: calc(var(--unit) * 2) calc(var(--gutter) / 2); display: grid; gap: 4px; align-content: start; }
.items li + li { border-left: 1px solid var(--rule); }
.items li:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.items h3 { font-size: var(--step-1); }
.items p.justify { font-size: 14px; }
@media (max-width: 640px) { .items { grid-template-columns: 1fr; } .items li { border-left: 0 !important; border-top: 1px solid var(--rule); padding-left: 0; } }
</style>
</head>
<body>
<section class="wrap">
<h2 class="flag">In brief</h2>
<div class="r2"></div>
<ul class="items">
<li><p class="caps kicker">Transport</p><h3 class="head">Night buses return to route 8</h3><p class="justify">Services every 30 minutes until 3am from Friday, after a two-year pause.</p></li>
<li><p class="caps kicker">Schools</p><h3 class="head">New sixth form opens in Bedminster</h3><p class="justify">The college takes 240 students in its first year and teaches boatbuilding.</p></li>
<li><p class="caps kicker">Weather</p><h3 class="head">Coldest October night since 1997</h3><p class="justify">Temperatures fell to −3°C at Filton, the Met Office said on Sunday.</p></li>
<li><p class="caps kicker">Arts</p><h3 class="head">Old Vic announces winter season</h3><p class="justify">Four new plays, two of them by writers from the city, open in January.</p></li>
</ul>
</section>
</body>
</html>