Layout tree (as in design/layout.json)
{
"pattern": "content.memphis-wavy-story",
"kind": "content",
"grid": {
"title": "1-6",
"body": "7-12",
"image": "1-6",
"body2": "7-10",
"ring": "11-12"
},
"slots": [
"title",
"body",
"image",
"body2"
],
"tree": {
"el": "grid",
"gap": 4,
"rowGap": 4,
"align": "center",
"children": [
{
"el": "shape",
"span": "1-12",
"kind": "bar",
"size": "md",
"fill": "accent"
},
{
"el": "text",
"span": "1-6",
"slot": "title",
"role": "h2",
"step": 5,
"leading": "tight"
},
{
"el": "text",
"span": "7-12",
"slot": "body",
"role": "lead",
"maxCh": 40
},
{
"el": "media",
"span": "1-6",
"slot": "image",
"aspect": "1/1",
"treatment": "illustration",
"frame": "circle"
},
{
"el": "text",
"span": "7-10",
"slot": "body2",
"role": "lead",
"maxCh": 40
},
{
"el": "shape",
"span": "11-12",
"mobile": "hide",
"kind": "ring",
"size": "lg",
"fill": "accent2"
}
]
}
}