Edit Z-index

Name

Also known as (comma separated)

Brief definition Controls stacking order.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "z1", "type": "number", "label": "Mint card z-index", "default": 1, "min": -2, "max": 4, "step": 1 }, { "id": "z2", "type": "number", "label": "Blush card z-index", "default": 2, "min": -2, "max": 4, "step": 1 }, { "id": "z3", "type": "number", "label": "Sky card z-index", "default": 0, "min": -2, "max": 4, "step": 1 }, { "id": "z4", "type": "number", "label": "Lavender card z-index", "default": 3, "min": -2, "max": 4, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"zi-wrap\" role=\"img\" aria-label=\"Four overlapping cards; each card's z-index number controls which one appears in front, higher numbers on top\">\n <div class=\"zi-stack\">\n <div class=\"zi-card zi-card--mint\" style=\"z-index:{{z1}};\">mint<br>z {{z1}}</div>\n <div class=\"zi-card zi-card--blush\" style=\"z-index:{{z2}};\">blush<br>z {{z2}}</div>\n <div class=\"zi-card zi-card--sky\" style=\"z-index:{{z3}};\">sky<br>z {{z3}}</div>\n <div class=\"zi-card zi-card--lav\" style=\"z-index:{{z4}};\">lavender<br>z {{z4}}</div>\n </div>\n <p class=\"zi-caption\">z-index: mint {{z1}} &middot; blush {{z2}} &middot; sky {{z3}} &middot; lavender {{z4}} &mdash; highest number renders on top</p>\n</div>\n<style>\n.zi-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.zi-stack { position: relative; height: 160px; }\n.zi-card { position: absolute; width: 120px; height: 90px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 12px; box-shadow: 0 6px 16px rgba(36,20,48,.25); border: 1.5px solid #241430; }\n.zi-card--mint { background: #A8E6C1; top: 0; left: 0; }\n.zi-card--blush { background: #F5C2E0; top: 20px; left: 50px; }\n.zi-card--sky { background: #BFD9F2; top: 40px; left: 100px; }\n.zi-card--lav { background: #D9C8F0; top: 60px; left: 150px; }\n.zi-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[320px]\" role=\"img\" aria-label=\"Four overlapping cards; each card's z-index number controls which one appears in front, higher numbers on top\">\n <div class=\"relative h-[160px]\">\n <div class=\"absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#A8E6C1] top-0 left-0\" style=\"z-index:{{z1}};\">mint<br>z {{z1}}</div>\n <div class=\"absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#F5C2E0] top-5 left-[50px]\" style=\"z-index:{{z2}};\">blush<br>z {{z2}}</div>\n <div class=\"absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#BFD9F2] top-10 left-[100px]\" style=\"z-index:{{z3}};\">sky<br>z {{z3}}</div>\n <div class=\"absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#D9C8F0] top-[60px] left-[150px]\" style=\"z-index:{{z4}};\">lavender<br>z {{z4}}</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">z-index: mint {{z1}} &middot; blush {{z2}} &middot; sky {{z3}} &middot; lavender {{z4}} &mdash; highest number renders on top</p>\n</div>", "react": "export function ZIndexStack({\n z1 = {{z1}},\n z2 = {{z2}},\n z3 = {{z3}},\n z4 = {{z4}},\n}) {\n const base = { position: \"absolute\", width: 120, height: 90, borderRadius: 10, display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n textAlign: \"center\", fontWeight: 700, fontSize: 12, boxShadow: \"0 6px 16px rgba(36,20,48,.25)\", border: \"1.5px solid #241430\" };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"Four overlapping cards; each card's z-index number controls which one appears in front, higher numbers on top\">\n <div style={{ position: \"relative\", height: 160 }}>\n <div style={{ ...base, background: \"#A8E6C1\", top: 0, left: 0, zIndex: z1 }}>mint<br />z {z1}</div>\n <div style={{ ...base, background: \"#F5C2E0\", top: 20, left: 50, zIndex: z2 }}>blush<br />z {z2}</div>\n <div style={{ ...base, background: \"#BFD9F2\", top: 40, left: 100, zIndex: z3 }}>sky<br />z {z3}</div>\n <div style={{ ...base, background: \"#D9C8F0\", top: 60, left: 150, zIndex: z4 }}>lavender<br />z {z4}</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n z-index: mint {z1} &middot; blush {z2} &middot; sky {z3} &middot; lavender {z4} &mdash; highest number renders on top\n </p>\n </div>\n );\n}" }