Edit Portfolio Grid

Name

Also known as (comma separated)

Brief definition Grid showcasing previous work.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Selected work" }, { "id": "columns", "type": "select", "label": "Columns", "default": "3", "options": [ "2", "3", "4" ] }, { "id": "alwaysShowCaptions", "type": "toggle", "label": "Always show captions", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<section class=\"pfolio\">\n <h2 class=\"pfolio__heading\">{{heading}}</h2>\n <div class=\"pfolio__grid pfolio__grid--{{columns}} pfolio__grid--{{#if alwaysShowCaptions}}always{{/if}}{{#unless alwaysShowCaptions}}hover{{/unless}}\">\n <figure class=\"pfolio__item\"><div style=\"background:{{accent}};\" role=\"img\" aria-label=\"Brand refresh for Northwind\"></div><figcaption>Brand refresh</figcaption></figure>\n <figure class=\"pfolio__item\"><div style=\"background:{{accent}};\" role=\"img\" aria-label=\"App redesign for Halcyon\"></div><figcaption>App redesign</figcaption></figure>\n <figure class=\"pfolio__item\"><div style=\"background:{{accent}};\" role=\"img\" aria-label=\"Packaging for Fenwick\"></div><figcaption>Packaging</figcaption></figure>\n </div>\n</section>\n<style>\n.pfolio { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; }\n.pfolio__heading { margin: 0 0 18px; font-size: 22px; font-weight: 700; }\n.pfolio__grid { display: grid; gap: 16px; }\n.pfolio__grid--2 { grid-template-columns: repeat(2, 1fr); }\n.pfolio__grid--3 { grid-template-columns: repeat(3, 1fr); }\n.pfolio__grid--4 { grid-template-columns: repeat(4, 1fr); }\n.pfolio__item { margin: 0; position: relative; border-radius: 10px; overflow: hidden; }\n.pfolio__item div { aspect-ratio: 4 / 3; opacity: .85; }\n.pfolio__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: #241430cc; color: #FAF7F2; font-size: 13px; font-weight: 600; opacity: 0; }\n.pfolio__grid--always figcaption { opacity: 1; }\n.pfolio__grid--hover .pfolio__item:hover figcaption, .pfolio__grid--hover .pfolio__item:focus-within figcaption { opacity: 1; }\n@media (prefers-reduced-motion: no-preference) {\n .pfolio__item figcaption { transition: opacity .15s; }\n}\n</style>", "tailwind": "<section class=\"font-sans text-[#241430] p-6\">\n <h2 class=\"m-0 mb-4.5 text-2xl font-bold\">{{heading}}</h2>\n <div class=\"pfolio-tw pfolio-tw--{{columns}} pfolio-tw--{{#if alwaysShowCaptions}}always{{/if}}{{#unless alwaysShowCaptions}}hover{{/unless}} grid gap-4\">\n <figure class=\"pfolio-tw__item m-0 relative rounded-[10px] overflow-hidden\"><div class=\"aspect-[4/3] opacity-85\" style=\"background:{{accent}};\" role=\"img\" aria-label=\"Brand refresh for Northwind\"></div><figcaption class=\"pfolio-tw__cap absolute left-0 right-0 bottom-0 px-2.5 py-2 bg-[#241430cc] text-[#FAF7F2] text-[13px] font-semibold\">Brand refresh</figcaption></figure>\n <figure class=\"pfolio-tw__item m-0 relative rounded-[10px] overflow-hidden\"><div class=\"aspect-[4/3] opacity-85\" style=\"background:{{accent}};\" role=\"img\" aria-label=\"App redesign for Halcyon\"></div><figcaption class=\"pfolio-tw__cap absolute left-0 right-0 bottom-0 px-2.5 py-2 bg-[#241430cc] text-[#FAF7F2] text-[13px] font-semibold\">App redesign</figcaption></figure>\n <figure class=\"pfolio-tw__item m-0 relative rounded-[10px] overflow-hidden\"><div class=\"aspect-[4/3] opacity-85\" style=\"background:{{accent}};\" role=\"img\" aria-label=\"Packaging for Fenwick\"></div><figcaption class=\"pfolio-tw__cap absolute left-0 right-0 bottom-0 px-2.5 py-2 bg-[#241430cc] text-[#FAF7F2] text-[13px] font-semibold\">Packaging</figcaption></figure>\n </div>\n</section>\n<style>\n.pfolio-tw--2 { grid-template-columns: repeat(2, 1fr); }\n.pfolio-tw--3 { grid-template-columns: repeat(3, 1fr); }\n.pfolio-tw--4 { grid-template-columns: repeat(4, 1fr); }\n.pfolio-tw__cap { opacity: 0; }\n.pfolio-tw--always .pfolio-tw__cap { opacity: 1; }\n.pfolio-tw--hover .pfolio-tw__item:hover .pfolio-tw__cap, .pfolio-tw--hover .pfolio-tw__item:focus-within .pfolio-tw__cap { opacity: 1; }\n@media (prefers-reduced-motion: no-preference) {\n .pfolio-tw__cap { transition: opacity .15s; }\n}\n</style>", "react": "export function PortfolioGrid({\n heading = \"{{heading}}\",\n columns = \"{{columns}}\",\n alwaysShowCaptions = {{alwaysShowCaptions}},\n accent = \"{{accent}}\",\n}) {\n const items = [\n { label: \"Brand refresh\", alt: \"Brand refresh for Northwind\" },\n { label: \"App redesign\", alt: \"App redesign for Halcyon\" },\n { label: \"Packaging\", alt: \"Packaging for Fenwick\" },\n ];\n return (\n <section style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", padding: 24 }}>\n <h2 style={{ margin: \"0 0 18px\", fontSize: 22, fontWeight: 700 }}>{heading}</h2>\n <div style={{ display: \"grid\", gap: 16, gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n {items.map((item) => (\n <figure key={item.label} style={{ margin: 0, position: \"relative\", borderRadius: 10, overflow: \"hidden\" }}>\n <div role=\"img\" aria-label={item.alt} style={{ aspectRatio: \"4 / 3\", opacity: 0.85, background: accent }} />\n <figcaption style={{ position: \"absolute\", left: 0, right: 0, bottom: 0, padding: \"8px 10px\",\n background: \"#241430cc\", color: \"#FAF7F2\", fontSize: 13, fontWeight: 600,\n opacity: alwaysShowCaptions ? 1 : 0 }}>{item.label}</figcaption>\n </figure>\n ))}\n </div>\n </section>\n );\n}" }