Edit Aspect Ratio Box

Name

Also known as (comma separated)

Brief definition Container preserving a fixed width-to-height ratio.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "ratio", "type": "select", "label": "Ratio", "default": "16 / 9", "options": [ "16 / 9", "4 / 3", "1 / 1", "9 / 16" ] }, { "id": "fit", "type": "select", "label": "Image fit", "default": "cover", "options": [ "cover", "contain" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 12, "min": 0, "max": 32, "step": 1 }, { "id": "label", "type": "toggle", "label": "Show ratio badge", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ar-box\" style=\"aspect-ratio:{{ratio}};border-radius:{{radius}}px;\">\n <img class=\"ar-box__img\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='150' r='70' fill='%23A8E6C1'/%3E%3Cpath d='M0 220 L120 140 L220 210 L320 120 L400 190 L400 300 L0 300 Z' fill='%23D9C8F0'/%3E%3C/svg%3E\" style=\"object-fit:{{fit}};\" alt=\"\" loading=\"lazy\" width=\"400\" height=\"300\" />\n {{#if label}}\n <span class=\"ar-box__badge\">{{ratio}}</span>\n {{/if}}\n</div>\n<style>\n.ar-box { position: relative; width: 100%; max-width: 360px; overflow: hidden; background: #FAF7F2; border: 1px solid #24143022; }\n.ar-box__img { display: block; width: 100%; height: 100%; }\n.ar-box__badge { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: #241430cc; color: #FAF7F2; font: 600 12px/1.4 system-ui, sans-serif; }\n</style>", "tailwind": "<div class=\"ar-box-tw relative w-full max-w-[360px] overflow-hidden bg-[#FAF7F2] border border-[#24143022]\" style=\"aspect-ratio:{{ratio}};border-radius:{{radius}}px;\">\n <img class=\"block w-full h-full\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='150' r='70' fill='%23A8E6C1'/%3E%3Cpath d='M0 220 L120 140 L220 210 L320 120 L400 190 L400 300 L0 300 Z' fill='%23D9C8F0'/%3E%3C/svg%3E\" style=\"object-fit:{{fit}};\" alt=\"\" loading=\"lazy\" width=\"400\" height=\"300\" />\n {{#if label}}\n <span class=\"absolute right-2 bottom-2 px-2 py-1 rounded-md text-xs font-semibold text-[#FAF7F2]\" style=\"background:#241430cc;\">{{ratio}}</span>\n {{/if}}\n</div>", "react": "export function AspectRatioBox({\n ratio = \"{{ratio}}\",\n fit = \"{{fit}}\",\n radius = {{radius}},\n label = {{label}},\n}) {\n return (\n <div style={{ position: \"relative\", width: \"100%\", maxWidth: 360, overflow: \"hidden\",\n background: \"#FAF7F2\", border: \"1px solid #24143022\", aspectRatio: ratio, borderRadius: radius }}>\n <img\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='150' r='70' fill='%23A8E6C1'/%3E%3Cpath d='M0 220 L120 140 L220 210 L320 120 L400 190 L400 300 L0 300 Z' fill='%23D9C8F0'/%3E%3C/svg%3E\"\n alt=\"\"\n loading=\"lazy\"\n width={400}\n height={300}\n style={{ display: \"block\", width: \"100%\", height: \"100%\", objectFit: fit }}\n />\n {label && (\n <span style={{ position: \"absolute\", right: 8, bottom: 8, padding: \"3px 8px\", borderRadius: 6,\n background: \"#241430cc\", color: \"#FAF7F2\", font: \"600 12px/1.4 system-ui, sans-serif\" }}>\n {ratio}\n </span>\n )}\n </div>\n );\n}" }