Edit Logo Cloud

Name

Also known as (comma separated)

Brief definition Grid or row of client/partner logos.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Trusted by teams at" }, { "id": "columns", "type": "select", "label": "Columns", "default": "4", "options": [ "3", "4", "5" ] }, { "id": "grayscale", "type": "toggle", "label": "Grayscale logos", "default": true }, { "id": "accent", "type": "color", "label": "Logo block colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<section class=\"lcloud\" data-grayscale=\"{{grayscale}}\">\n <p class=\"lcloud__heading\">{{heading}}</p>\n <div class=\"lcloud__grid lcloud__grid--{{columns}}\">\n <span class=\"lcloud__logo\" style=\"border-color:{{accent}};color:{{accent}};\">Nimbus</span>\n <span class=\"lcloud__logo\" style=\"border-color:{{accent}};color:{{accent}};\">Fenwick</span>\n <span class=\"lcloud__logo\" style=\"border-color:{{accent}};color:{{accent}};\">Cobalt</span>\n <span class=\"lcloud__logo\" style=\"border-color:{{accent}};color:{{accent}};\">Ridgeline</span>\n <span class=\"lcloud__logo\" style=\"border-color:{{accent}};color:{{accent}};\">Halcyon</span>\n </div>\n</section>\n<style>\n.lcloud { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; text-align: center; }\n.lcloud__heading { margin: 0 0 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #24143088; }\n.lcloud__grid { display: grid; gap: 16px; align-items: center; }\n.lcloud__grid--3 { grid-template-columns: repeat(3, 1fr); }\n.lcloud__grid--4 { grid-template-columns: repeat(4, 1fr); }\n.lcloud__grid--5 { grid-template-columns: repeat(5, 1fr); }\n.lcloud__grid--3 span:nth-child(n+4) { display: none; }\n.lcloud__grid--4 span:nth-child(n+5) { display: none; }\n.lcloud__logo { display: block; border: 1.5px solid; border-radius: 8px; padding: 14px 8px; font-weight: 700; }\n.lcloud[data-grayscale=\"true\"] .lcloud__logo { filter: grayscale(1) opacity(.75); }\n</style>", "tailwind": "<section class=\"font-sans text-[#241430] p-6 text-center\">\n <p class=\"m-0 mb-5 text-xs font-bold uppercase tracking-wide text-[#241430]/55\">{{heading}}</p>\n <div class=\"lcloud-tw lcloud-tw--{{columns}} grid gap-4 items-center\" data-grayscale=\"{{grayscale}}\">\n <span class=\"lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold\" style=\"border-color:{{accent}};color:{{accent}};\">Nimbus</span>\n <span class=\"lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold\" style=\"border-color:{{accent}};color:{{accent}};\">Fenwick</span>\n <span class=\"lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold\" style=\"border-color:{{accent}};color:{{accent}};\">Cobalt</span>\n <span class=\"lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold\" style=\"border-color:{{accent}};color:{{accent}};\">Ridgeline</span>\n <span class=\"lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold\" style=\"border-color:{{accent}};color:{{accent}};\">Halcyon</span>\n </div>\n</section>\n<style>\n.lcloud-tw--3 { grid-template-columns: repeat(3, 1fr); }\n.lcloud-tw--4 { grid-template-columns: repeat(4, 1fr); }\n.lcloud-tw--5 { grid-template-columns: repeat(5, 1fr); }\n.lcloud-tw--3 span:nth-child(n+4) { display: none; }\n.lcloud-tw--4 span:nth-child(n+5) { display: none; }\n.lcloud-tw[data-grayscale=\"true\"] .lcloud-tw__logo { filter: grayscale(1) opacity(.75); }\n</style>", "react": "export function LogoCloud({\n heading = \"{{heading}}\",\n columns = \"{{columns}}\",\n grayscale = {{grayscale}},\n accent = \"{{accent}}\",\n}) {\n const logos = [\"Nimbus\", \"Fenwick\", \"Cobalt\", \"Ridgeline\", \"Halcyon\"].slice(0, Number(columns));\n return (\n <section style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", padding: 24, textAlign: \"center\" }}>\n <p style={{ margin: \"0 0 20px\", fontSize: 12, fontWeight: 700, textTransform: \"uppercase\", letterSpacing: \"0.06em\", color: \"#24143088\" }}>{heading}</p>\n <div style={{ display: \"grid\", gap: 16, alignItems: \"center\", gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n {logos.map((logo) => (\n <span key={logo} style={{ display: \"block\", border: `1.5px solid ${accent}`, borderRadius: 8, padding: \"14px 8px\",\n fontWeight: 700, color: accent, filter: grayscale ? \"grayscale(1) opacity(.75)\" : \"none\" }}>{logo}</span>\n ))}\n </div>\n </section>\n );\n}" }