Edit Lightbox

Name

Also known as (comma separated)

Brief definition Enlarged media/content overlay.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "caption", "type": "text", "label": "Caption", "default": "Mountain ridge at dawn" }, { "id": "visible", "type": "toggle", "label": "Visible", "default": true }, { "id": "fit", "type": "select", "label": "Media fit", "default": "contain", "options": [ "contain", "cover" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "width", "type": "number", "label": "Panel width", "default": 420, "min": 280, "max": 600, "step": 20 }, { "id": "nav", "type": "toggle", "label": "Show navigation", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"lightbox-demo{{#if visible}} lightbox-demo--visible{{/if}}\">\n <div class=\"lightbox\" style=\"--accent:{{accent}};--width:{{width}}px;\" role=\"dialog\" aria-modal=\"true\" aria-label=\"{{caption}}\">\n <button class=\"lightbox__close\" type=\"button\" aria-label=\"Close\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 1l14 14M15 1L1 15\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"/></svg>\n </button>\n {{#if nav}}\n <button class=\"lightbox__nav lightbox__nav--prev\" type=\"button\" aria-label=\"Previous image\">\n <svg width=\"10\" height=\"16\" viewBox=\"0 0 10 16\" aria-hidden=\"true\"><path d=\"M9 1L1 8l8 7\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"lightbox__nav lightbox__nav--next\" type=\"button\" aria-label=\"Next image\">\n <svg width=\"10\" height=\"16\" viewBox=\"0 0 10 16\" aria-hidden=\"true\"><path d=\"M1 1l8 7-8 7\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n {{/if}}\n <div class=\"lightbox__media lightbox__media--{{fit}}\" aria-hidden=\"true\"></div>\n <p class=\"lightbox__caption\">{{caption}}</p>\n </div>\n</div>\n<style>\n.lightbox-demo { position: relative; min-height: 380px; border-radius: 12px; background: #FAF7F2; overflow: hidden; display: none; }\n.lightbox-demo--visible { display: grid; place-items: center; background: rgba(36,20,48,.7); }\n.lightbox { position: relative; width: var(--width); box-sizing: border-box; background: #241430; color: #FAF7F2; border-radius: 14px; padding: 20px; box-shadow: 0 24px 48px rgba(36,20,48,.4); font: 16px/1.5 system-ui, sans-serif; }\n.lightbox__media { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #BFD9F2); margin-bottom: 14px; }\n.lightbox__media--cover { background-size: cover; }\n.lightbox__media--contain { background-size: contain; }\n.lightbox__caption { margin: 0; font-size: 14px; text-align: center; color: #FAF7F2cc; }\n.lightbox__close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #FAF7F2; cursor: pointer; padding: 6px; border-radius: 6px; }\n.lightbox__close:hover, .lightbox__close:focus-visible { background: var(--accent); color: #241430; outline: none; }\n.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #FAF7F2; cursor: pointer; padding: 8px; border-radius: 6px; }\n.lightbox__nav--prev { left: -4px; }\n.lightbox__nav--next { right: -4px; }\n.lightbox__nav:hover, .lightbox__nav:focus-visible { background: var(--accent); color: #241430; outline: none; }\n</style>", "tailwind": "<div class=\"relative min-h-[380px] rounded-xl bg-[#FAF7F2] overflow-hidden{{#if visible}} grid place-items-center{{/if}}\" style=\"{{#if visible}}background:rgba(36,20,48,.7);{{/if}}\">\n <div role=\"dialog\" aria-modal=\"true\" aria-label=\"{{caption}}\" class=\"relative box-border bg-[#241430] text-[#FAF7F2] rounded-2xl p-5 shadow-2xl font-sans\" style=\"width:{{width}}px;--accent:{{accent}};\">\n <button type=\"button\" aria-label=\"Close\" class=\"absolute top-3 right-3 bg-transparent border-none text-[#FAF7F2] cursor-pointer p-1.5 rounded-md hover:bg-[var(--accent)] hover:text-[#241430] focus-visible:bg-[var(--accent)] focus-visible:text-[#241430] focus-visible:outline-none\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 1l14 14M15 1L1 15\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"/></svg>\n </button>\n {{#if nav}}\n <button type=\"button\" aria-label=\"Previous image\" class=\"absolute top-1/2 -translate-y-1/2 -left-1 bg-transparent border-none text-[#FAF7F2] cursor-pointer p-2 rounded-md hover:bg-[var(--accent)] hover:text-[#241430] focus-visible:bg-[var(--accent)] focus-visible:text-[#241430] focus-visible:outline-none\">\n <svg width=\"10\" height=\"16\" viewBox=\"0 0 10 16\" aria-hidden=\"true\"><path d=\"M9 1L1 8l8 7\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" aria-label=\"Next image\" class=\"absolute top-1/2 -translate-y-1/2 -right-1 bg-transparent border-none text-[#FAF7F2] cursor-pointer p-2 rounded-md hover:bg-[var(--accent)] hover:text-[#241430] focus-visible:bg-[var(--accent)] focus-visible:text-[#241430] focus-visible:outline-none\">\n <svg width=\"10\" height=\"16\" viewBox=\"0 0 10 16\" aria-hidden=\"true\"><path d=\"M1 1l8 7-8 7\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n {{/if}}\n <div class=\"lightbox-tw__media lightbox-tw__media--{{fit}} w-full aspect-[4/3] rounded-[10px] mb-3.5\" style=\"background:linear-gradient(135deg,{{accent}},#BFD9F2);\"></div>\n <p class=\"m-0 text-sm text-center text-[#FAF7F2]/80\">{{caption}}</p>\n </div>\n</div>\n<style>\n.lightbox-tw__media--cover { background-size: cover; }\n.lightbox-tw__media--contain { background-size: contain; }\n</style>", "react": "export function Lightbox({\n caption = \"{{caption}}\",\n visible = {{visible}},\n fit = \"{{fit}}\",\n accent = \"{{accent}}\",\n width = {{width}},\n nav = {{nav}},\n}) {\n if (!visible) {\n return <div style={{ position: \"relative\", minHeight: 380, borderRadius: 12, background: \"#FAF7F2\" }} />;\n }\n return (\n <div style={{ position: \"relative\", minHeight: 380, borderRadius: 12, overflow: \"hidden\",\n display: \"grid\", placeItems: \"center\", background: \"rgba(36,20,48,.7)\" }}>\n <div role=\"dialog\" aria-modal=\"true\" aria-label={caption} style={{ position: \"relative\", width, boxSizing: \"border-box\",\n background: \"#241430\", color: \"#FAF7F2\", borderRadius: 14, padding: 20, boxShadow: \"0 24px 48px rgba(36,20,48,.4)\",\n fontFamily: \"system-ui, sans-serif\" }}>\n <button type=\"button\" aria-label=\"Close\" style={{ position: \"absolute\", top: 12, right: 12, background: \"none\",\n border: \"none\", color: \"#FAF7F2\", cursor: \"pointer\", padding: 6, borderRadius: 6 }}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 1l14 14M15 1L1 15\" stroke=\"currentColor\" strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\"/></svg>\n </button>\n {nav && (\n <>\n <button type=\"button\" aria-label=\"Previous image\" style={{ position: \"absolute\", top: \"50%\", transform: \"translateY(-50%)\",\n left: -4, background: \"none\", border: \"none\", color: \"#FAF7F2\", cursor: \"pointer\", padding: 8, borderRadius: 6 }}>\n <svg width=\"10\" height=\"16\" viewBox=\"0 0 10 16\" aria-hidden=\"true\"><path d=\"M9 1L1 8l8 7\" stroke=\"currentColor\" strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" aria-label=\"Next image\" style={{ position: \"absolute\", top: \"50%\", transform: \"translateY(-50%)\",\n right: -4, background: \"none\", border: \"none\", color: \"#FAF7F2\", cursor: \"pointer\", padding: 8, borderRadius: 6 }}>\n <svg width=\"10\" height=\"16\" viewBox=\"0 0 10 16\" aria-hidden=\"true\"><path d=\"M1 1l8 7-8 7\" stroke=\"currentColor\" strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/></svg>\n </button>\n </>\n )}\n <div style={{ width: \"100%\", aspectRatio: \"4 / 3\", borderRadius: 10, marginBottom: 14,\n background: `linear-gradient(135deg, ${accent}, #BFD9F2)`, backgroundSize: fit === \"cover\" ? \"cover\" : \"contain\" }} aria-hidden=\"true\" />\n <p style={{ margin: 0, fontSize: 14, textAlign: \"center\", color: \"#FAF7F2cc\" }}>{caption}</p>\n </div>\n </div>\n );\n}" }