{ "schemaVersion": "2.0", "pages": [ { "id": "5c0de666-0000-4000-8000-000000000042", "name": "Layout lab", "width": 595, "height": 842, "pageFormat": "A4", "backgroundColor": "#f6f1e7", "elements": [ { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000001", "name": "L A VERTICAL · FITS ITS CONTENT · BACKGROUND LAYER", "left": 40, "top": 44, "width": 260, "height": 12, "text": "A VERTICAL · FITS ITS CONTENT · BACKGROUND LAYER", "fontFamily": "Montserrat", "fontSize": 7, "fontWeight": "bold", "fill": "#c0643a", "charSpacing": 120 }, { "$type": "layout_region", "id": "5c0de666-0000-4000-8000-000000000002", "name": "Card", "left": 40, "top": 60, "width": 240, "height": 300, "layout": { "mode": "vertical", "sizing": "hug", "childSizing": "content", "paddingTop": 16, "paddingRight": 16, "paddingBottom": 16, "paddingLeft": 16, "rowGap": 8, "cornerRadius": 12 }, "children": [ { "$type": "rectangle", "id": "5c0de666-0000-4000-8000-000000000003", "name": "Card background", "left": 0, "top": 0, "width": 240, "height": 300, "fill": "#ffffff", "stroke": "#d0d5dd", "strokeWidth": 0.75, "layoutBackground": true }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000004", "name": "Badge", "left": 16, "top": 16, "width": 120, "height": 12, "text": "LAST PIECES", "fontFamily": "Montserrat", "fontSize": 8, "fill": "#c0643a", "lineHeight": 1.25, "fontWeight": "bold", "charSpacing": 120, "placeholder": { "id": "5c0de666-0000-4000-8000-000000000005", "name": "Badge", "code": "badge", "placeholderType": "text", "required": false }, "condition": { "operator": "not_empty", "placeholderCode": "badge" } }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000006", "name": "Title", "left": 16, "top": 40, "width": 208, "height": 24, "text": "Title", "fontFamily": "Playfair Display", "fontSize": 20, "fill": "#1c2430", "lineHeight": 1.1, "fontWeight": "bold", "placeholder": { "id": "5c0de666-0000-4000-8000-000000000007", "name": "Title", "code": "title", "placeholderType": "text", "required": false }, "grow": { "maxLines": 3, "beyond": "shrink", "height": "content" } }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000008", "name": "Description", "left": 16, "top": 72, "width": 208, "height": 40, "text": "Description", "fontFamily": "Inter", "fontSize": 10, "fill": "#5c6663", "lineHeight": 1.4, "placeholder": { "id": "5c0de666-0000-4000-8000-000000000009", "name": "Description", "code": "description", "placeholderType": "text", "required": false }, "grow": { "maxLines": 5, "beyond": "ellipsis", "height": "content" } }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000010", "name": "Price", "left": 16, "top": 120, "width": 208, "height": 20, "text": "Price", "fontFamily": "Inter", "fontSize": 14, "fill": "#1c2430", "lineHeight": 1.25, "fontWeight": "bold", "placeholder": { "id": "5c0de666-0000-4000-8000-000000000011", "name": "Price", "code": "price", "placeholderType": "number", "required": false, "format": { "locale": "en-GB", "numberStyle": "currency", "currency": "GBP", "currencyDisplay": "symbol", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } } ] }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000012", "name": "L B ANCHORED AT THE BOTTOM OF A PHOTO", "left": 315, "top": 44, "width": 260, "height": 12, "text": "B ANCHORED AT THE BOTTOM OF A PHOTO", "fontFamily": "Montserrat", "fontSize": 7, "fontWeight": "bold", "fill": "#c0643a", "charSpacing": 120 }, { "$type": "image", "id": "5c0de666-0000-4000-8000-000000000013", "name": "Photo", "left": 315, "top": 60, "width": 240, "height": 300, "src": "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600", "fitMode": "fill" }, { "$type": "layout_region", "id": "5c0de666-0000-4000-8000-000000000014", "name": "Caption", "left": 315, "top": 260, "width": 240, "height": 100, "layout": { "mode": "vertical", "sizing": "hug", "childSizing": "content", "anchor": "end", "paddingTop": 14, "paddingRight": 14, "paddingBottom": 14, "paddingLeft": 14, "rowGap": 4 }, "children": [ { "$type": "rectangle", "id": "5c0de666-0000-4000-8000-000000000015", "name": "Veil", "left": 0, "top": 0, "width": 240, "height": 100, "fill": "#0b1f33", "opacity": 0.72, "layoutBackground": true }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000016", "name": "Caption title", "left": 14, "top": 14, "width": 212, "height": 22, "text": "Caption", "fontFamily": "Playfair Display", "fontSize": 16, "fill": "#ffffff", "lineHeight": 1.1, "fontWeight": "bold", "placeholder": { "id": "5c0de666-0000-4000-8000-000000000017", "name": "Caption", "code": "caption", "placeholderType": "text", "required": false }, "grow": { "maxLines": 3, "beyond": "shrink", "height": "content" } }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000018", "name": "Credit", "left": 14, "top": 40, "width": 212, "height": 12, "text": "Photo: northern ridge", "fontFamily": "Inter", "fontSize": 8, "fill": "#d0d5dd", "lineHeight": 1.25 } ] }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000019", "name": "L C HORIZONTAL ROW · CENTRED ACROSS", "left": 40, "top": 404, "width": 260, "height": 12, "text": "C HORIZONTAL ROW · CENTRED ACROSS", "fontFamily": "Montserrat", "fontSize": 7, "fontWeight": "bold", "fill": "#c0643a", "charSpacing": 120 }, { "$type": "layout_region", "id": "5c0de666-0000-4000-8000-000000000020", "name": "Row", "left": 40, "top": 420, "width": 515, "height": 60, "layout": { "mode": "horizontal", "sizing": "fixed", "childSizing": "content", "crossAxisAlignment": "center", "paddingTop": 10, "paddingRight": 12, "paddingBottom": 10, "paddingLeft": 12, "columnGap": 12 }, "children": [ { "$type": "rectangle", "id": "5c0de666-0000-4000-8000-000000000021", "name": "Row background", "left": 0, "top": 0, "width": 515, "height": 60, "fill": "#23493a", "layoutBackground": true }, { "$type": "circle", "id": "5c0de666-0000-4000-8000-000000000022", "name": "Dot", "left": 12, "top": 18, "width": 24, "height": 24, "radius": 12, "fill": "#e9c46a" }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000023", "name": "Hours", "left": 48, "top": 10, "width": 300, "height": 18, "text": "Open every day", "fontFamily": "Inter", "fontSize": 12, "fill": "#ffffff", "lineHeight": 1.25, "fontWeight": "bold", "placeholder": { "id": "5c0de666-0000-4000-8000-000000000024", "name": "Opening hours", "code": "hours", "placeholderType": "text", "required": false }, "grow": { "maxLines": 2, "beyond": "ellipsis", "height": "content" } }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000025", "name": "Row note", "left": 360, "top": 10, "width": 120, "height": 14, "text": "Book ahead", "fontFamily": "Inter", "fontSize": 9, "fill": "#e9c46a", "lineHeight": 1.25 } ] }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000026", "name": "L D GRID · THREE COLUMNS · GAPS 8", "left": 40, "top": 524, "width": 260, "height": 12, "text": "D GRID · THREE COLUMNS · GAPS 8", "fontFamily": "Montserrat", "fontSize": 7, "fontWeight": "bold", "fill": "#c0643a", "charSpacing": 120 }, { "$type": "layout_region", "id": "5c0de666-0000-4000-8000-000000000027", "name": "Grid", "left": 40, "top": 540, "width": 515, "height": 90, "layout": { "mode": "grid", "sizing": "fixed", "columns": 3, "rowGap": 8, "columnGap": 8, "paddingTop": 8, "paddingRight": 8, "paddingBottom": 8, "paddingLeft": 8 }, "children": [ { "$type": "rectangle", "id": "5c0de666-0000-4000-8000-000000000028", "name": "Grid background", "left": 0, "top": 0, "width": 515, "height": 90, "fill": "#ffffff", "layoutBackground": true }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000029", "name": "Tile Wi-Fi", "left": 0, "top": 0, "width": 166, "height": 34, "text": "Wi-Fi", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "bold", "fill": "#1c2430", "textAlign": "center" }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000030", "name": "Tile Parking", "left": 0, "top": 0, "width": 166, "height": 34, "text": "Parking", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "bold", "fill": "#1c2430", "textAlign": "center" }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000031", "name": "Tile Garden", "left": 0, "top": 0, "width": 166, "height": 34, "text": "Garden", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "bold", "fill": "#1c2430", "textAlign": "center" }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000032", "name": "Tile Breakfast", "left": 0, "top": 0, "width": 166, "height": 34, "text": "Breakfast", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "bold", "fill": "#1c2430", "textAlign": "center" }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000033", "name": "Tile Pets welcome", "left": 0, "top": 0, "width": 166, "height": 34, "text": "Pets welcome", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "bold", "fill": "#1c2430", "textAlign": "center" }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000034", "name": "Tile Late check-out", "left": 0, "top": 0, "width": 166, "height": 34, "text": "Late check-out", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "bold", "fill": "#1c2430", "textAlign": "center" } ] }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000035", "name": "L E FIXED BOX · CONTENT CENTRED", "left": 40, "top": 674, "width": 260, "height": 12, "text": "E FIXED BOX · CONTENT CENTRED", "fontFamily": "Montserrat", "fontSize": 7, "fontWeight": "bold", "fill": "#c0643a", "charSpacing": 120 }, { "$type": "layout_region", "id": "5c0de666-0000-4000-8000-000000000036", "name": "Centred", "left": 40, "top": 690, "width": 240, "height": 110, "layout": { "mode": "vertical", "sizing": "fixed", "childSizing": "content", "mainAxisAlignment": "center", "crossAxisAlignment": "center", "paddingTop": 10, "paddingRight": 10, "paddingBottom": 10, "paddingLeft": 10, "rowGap": 2 }, "children": [ { "$type": "rectangle", "id": "5c0de666-0000-4000-8000-000000000037", "name": "Box", "left": 0, "top": 0, "width": 240, "height": 110, "fill": "#ffffff", "stroke": "#c0643a", "strokeWidth": 1, "layoutBackground": true }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000038", "name": "Quote", "left": 10, "top": 10, "width": 220, "height": 16, "text": "Quote", "fontFamily": "Playfair Display", "fontSize": 13, "fill": "#1c2430", "lineHeight": 1.25, "fontStyle": "italic", "textAlign": "center", "placeholder": { "id": "5c0de666-0000-4000-8000-000000000039", "name": "Quote", "code": "quote", "placeholderType": "text", "required": false }, "grow": { "maxLines": 5, "beyond": "shrink", "height": "content" } } ] }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000040", "name": "L F OUTSIDE A LAYOUT NOTHING MOVES", "left": 315, "top": 674, "width": 260, "height": 12, "text": "F OUTSIDE A LAYOUT NOTHING MOVES", "fontFamily": "Montserrat", "fontSize": 7, "fontWeight": "bold", "fill": "#c0643a", "charSpacing": 120 }, { "$type": "text", "id": "5c0de666-0000-4000-8000-000000000041", "name": "Fixed note", "left": 315, "top": 690, "width": 240, "height": 110, "fontFamily": "Inter", "fontSize": 9, "fill": "#5c6663", "lineHeight": 1.4, "text": "Elements outside a Layout keep their place: card A grows or shrinks, the page does not reflow around it. Put everything that must move together inside one Layout." } ] } ], "sampleSets": [ { "id": "5c0de666-0000-4000-8000-000000000901", "name": "Short values", "values": { "title": "Linen shirt", "description": "Washed linen, relaxed fit.", "price": 49, "badge": "", "caption": "Night on the ridge", "hours": "Open every day", "quote": "Simply the best stay." } }, { "id": "5c0de666-0000-4000-8000-000000000902", "name": "Long values", "values": { "title": "Hand-finished washed linen shirt with mother-of-pearl buttons", "description": "Garment-washed European linen in a relaxed cut, with a soft collar, a single chest pocket and mother-of-pearl buttons. It softens with every wash and keeps cool on the hottest days of the summer, from the city to the sea. Made in small batches in Portugal.", "price": 129, "badge": "LAST PIECES", "caption": "A night under the Milky Way on the northern ridge, two hours from the nearest road", "hours": "Open every day from 7 am to 11 pm, kitchen until 10 pm, garden bar until midnight", "quote": "Quiet rooms, a garden full of birds and the best breakfast we had on the whole trip. We will be back next spring." } } ] }