Edit Thumbnail

Name

Also known as (comma separated)

Brief definition Small preview version of an image or video.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "size", "type": "number", "label": "Size", "default": 72, "min": 40, "max": 120, "step": 4 }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 24, "step": 1 }, { "id": "badge", "type": "toggle", "label": "Show badge", "default": true }, { "id": "label", "type": "text", "label": "Label", "default": "Sunset dock" } ]

Templates (JSON object keyed by format) { "html": "<figure class=\"thumb\" style=\"width:{{size}}px;\">\n <span class=\"thumb__frame\" style=\"width:{{size}}px;height:{{size}}px;border-radius:{{radius}}px;\">\n <svg viewBox=\"0 0 48 48\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"48\" height=\"48\" fill=\"#BFD9F2\"/><circle cx=\"24\" cy=\"24\" r=\"12\" fill=\"#A8E6C1\"/></svg>\n {{#if badge}}<span class=\"thumb__badge\" aria-hidden=\"true\"></span>{{/if}}\n </span>\n <figcaption class=\"thumb__label\">{{label}}</figcaption>\n</figure>\n<style>\n.thumb { margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font: 12px/1.3 system-ui, sans-serif; color: #241430; }\n.thumb__frame { position: relative; display: block; overflow: hidden; border: 1px solid #24143022; }\n.thumb__frame svg { display: block; }\n.thumb__badge { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #E8A020; border: 2px solid #FAF7F2; }\n.thumb__label { max-width: 120px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n</style>", "tailwind": "<figure class=\"thumb-tw m-0 inline-flex flex-col items-center gap-1.5 font-sans text-xs text-[#241430]\" style=\"width:{{size}}px;\">\n <span class=\"relative block overflow-hidden border border-[#24143022]\" style=\"width:{{size}}px;height:{{size}}px;border-radius:{{radius}}px;\">\n <svg viewBox=\"0 0 48 48\" width=\"100%\" height=\"100%\" class=\"block\" aria-hidden=\"true\"><rect width=\"48\" height=\"48\" fill=\"#BFD9F2\"/><circle cx=\"24\" cy=\"24\" r=\"12\" fill=\"#A8E6C1\"/></svg>\n {{#if badge}}<span class=\"absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-[#FAF7F2]\" style=\"background:#E8A020;\" aria-hidden=\"true\"></span>{{/if}}\n </span>\n <figcaption class=\"max-w-[120px] text-center overflow-hidden text-ellipsis whitespace-nowrap\">{{label}}</figcaption>\n</figure>", "react": "export function Thumbnail({\n size = {{size}},\n radius = {{radius}},\n badge = {{badge}},\n label = \"{{label}}\",\n}) {\n return (\n <figure style={{ margin: 0, display: \"inline-flex\", flexDirection: \"column\", alignItems: \"center\", gap: 6,\n font: \"12px/1.3 system-ui, sans-serif\", color: \"#241430\", width: size }}>\n <span style={{ position: \"relative\", display: \"block\", overflow: \"hidden\", border: \"1px solid #24143022\",\n width: size, height: size, borderRadius: radius }}>\n <svg viewBox=\"0 0 48 48\" width=\"100%\" height=\"100%\" style={{ display: \"block\" }} aria-hidden=\"true\">\n <rect width=\"48\" height=\"48\" fill=\"#BFD9F2\" />\n <circle cx=\"24\" cy=\"24\" r=\"12\" fill=\"#A8E6C1\" />\n </svg>\n {badge && (\n <span style={{ position: \"absolute\", top: -3, right: -3, width: 12, height: 12, borderRadius: \"50%\",\n background: \"#E8A020\", border: \"2px solid #FAF7F2\" }} aria-hidden=\"true\" />\n )}\n </span>\n <figcaption style={{ maxWidth: 120, textAlign: \"center\", overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" }}>\n {label}\n </figcaption>\n </figure>\n );\n}" }