Edit Box Model

Name

Also known as (comma separated)

Brief definition Content, padding, border and margin model.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "padding", "type": "number", "label": "Padding", "default": 16, "min": 0, "max": 40, "step": 2 }, { "id": "border", "type": "number", "label": "Border width", "default": 4, "min": 0, "max": 12, "step": 1 }, { "id": "margin", "type": "number", "label": "Margin", "default": 20, "min": 0, "max": 40, "step": 2 }, { "id": "boxSizing", "type": "select", "label": "Box-sizing", "default": "content-box", "options": [ "content-box", "border-box" ] }, { "id": "boxSize", "type": "number", "label": "Content size", "default": 100, "min": 60, "max": 160, "step": 10 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"bm-wrap\" role=\"img\" aria-label=\"Box model diagram: margin layer in sky blue, border in gold, padding in blush, content in mint\">\n <div class=\"bm-margin\" style=\"padding:{{margin}}px;\">\n <span class=\"bm-tag\">margin {{margin}}px</span>\n <div class=\"bm-border\" style=\"padding:{{border}}px;\">\n <span class=\"bm-tag\">border {{border}}px</span>\n <div class=\"bm-padding\" style=\"padding:{{padding}}px;\">\n <span class=\"bm-tag\">padding {{padding}}px</span>\n <div class=\"bm-content\" style=\"width:{{boxSize}}px;height:{{boxSize}}px;box-sizing:{{boxSizing}};\">content</div>\n </div>\n </div>\n </div>\n <p class=\"bm-caption\">padding {{padding}}px &middot; border {{border}}px &middot; margin {{margin}}px &middot; box-sizing: {{boxSizing}} &middot; content {{boxSize}}px square</p>\n</div>\n<style>\n.bm-wrap { font: 14px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.bm-margin { position: relative; background: #BFD9F2; }\n.bm-border { position: relative; background: #E8A020; }\n.bm-padding { position: relative; background: #F5C2E0; }\n.bm-content { position: relative; background: #A8E6C1; display: flex; align-items: center; justify-content: center; font-weight: 700; }\n.bm-tag { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 600; color: #241430; text-transform: uppercase; letter-spacing: .03em; }\n.bm-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[320px]\" role=\"img\" aria-label=\"Box model diagram: margin layer in sky blue, border in gold, padding in blush, content in mint\">\n <div class=\"relative bg-[#BFD9F2]\" style=\"padding:{{margin}}px\">\n <span class=\"absolute top-0.5 left-1 text-[10px] font-semibold uppercase tracking-wide\">margin {{margin}}px</span>\n <div class=\"relative bg-[#E8A020]\" style=\"padding:{{border}}px\">\n <span class=\"absolute top-0.5 left-1 text-[10px] font-semibold uppercase tracking-wide\">border {{border}}px</span>\n <div class=\"relative bg-[#F5C2E0]\" style=\"padding:{{padding}}px\">\n <span class=\"absolute top-0.5 left-1 text-[10px] font-semibold uppercase tracking-wide\">padding {{padding}}px</span>\n <div class=\"relative bg-[#A8E6C1] flex items-center justify-center font-bold\" style=\"width:{{boxSize}}px;height:{{boxSize}}px;box-sizing:{{boxSizing}}\">content</div>\n </div>\n </div>\n </div>\n <p class=\"mt-3 text-xs text-[#241430]/80\">padding {{padding}}px &middot; border {{border}}px &middot; margin {{margin}}px &middot; box-sizing: {{boxSizing}} &middot; content {{boxSize}}px square</p>\n</div>", "react": "export function BoxModel({\n padding = {{padding}},\n border = {{border}},\n margin = {{margin}},\n boxSizing = \"{{boxSizing}}\",\n boxSize = {{boxSize}},\n}) {\n const tag = { position: \"absolute\", top: 2, left: 4, fontSize: 10, fontWeight: 600, textTransform: \"uppercase\", letterSpacing: \".03em\" };\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }} role=\"img\"\n aria-label=\"Box model diagram: margin layer in sky blue, border in gold, padding in blush, content in mint\">\n <div style={{ position: \"relative\", background: \"#BFD9F2\", padding: margin }}>\n <span style={tag}>margin {margin}px</span>\n <div style={{ position: \"relative\", background: \"#E8A020\", padding: border }}>\n <span style={tag}>border {border}px</span>\n <div style={{ position: \"relative\", background: \"#F5C2E0\", padding: padding }}>\n <span style={tag}>padding {padding}px</span>\n <div style={{ position: \"relative\", background: \"#A8E6C1\", display: \"flex\", alignItems: \"center\",\n justifyContent: \"center\", fontWeight: 700, width: boxSize, height: boxSize, boxSizing }}>\n content\n </div>\n </div>\n </div>\n </div>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>\n padding {padding}px &middot; border {border}px &middot; margin {margin}px &middot; box-sizing: {boxSizing} &middot; content {boxSize}px square\n </p>\n </div>\n );\n}" }