Edit Elevation

Name

Also known as (comma separated)

Brief definition Perceived distance above a surface.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "level", "type": "select", "label": "Elevation level", "default": "1", "options": [ "0", "1", "2", "3" ] }, { "id": "background", "type": "color", "label": "Surface colour", "default": "#FAF7F2", "presets": [ "#FAF7F2", "#A8E6C1", "#F5C2E0", "#BFD9F2" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 12, "min": 0, "max": 28, "step": 2 }, { "id": "size", "type": "number", "label": "Card size", "default": 100, "min": 60, "max": 140, "step": 10 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"el-wrap\" role=\"img\" aria-label=\"A card floating higher above the surface as its elevation level increases, shown by a longer, softer shadow and a small upward shift\" data-level=\"{{level}}\">\n <div class=\"el-floor\">\n <div class=\"el-card\" style=\"width:{{size}}px;height:{{size}}px;background:{{background}};border-radius:{{radius}}px;\">level {{level}}</div>\n </div>\n <p class=\"el-caption\">elevation level {{level}} of 3</p>\n</div>\n<style>\n.el-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.el-floor { background: #24143011; border-radius: 12px; padding: 32px 20px; display: flex; justify-content: center; }\n.el-card { display: flex; align-items: center; justify-content: center; font-weight: 700; }\n[data-level=\"0\"] .el-card { box-shadow: none; transform: translateY(0); }\n[data-level=\"1\"] .el-card { box-shadow: 0 2px 6px rgba(36,20,48,.18); transform: translateY(-1px); }\n[data-level=\"2\"] .el-card { box-shadow: 0 8px 18px rgba(36,20,48,.22); transform: translateY(-4px); }\n[data-level=\"3\"] .el-card { box-shadow: 0 18px 36px rgba(36,20,48,.28); transform: translateY(-8px); }\n.el-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"el-tw font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"A card floating higher above the surface as its elevation level increases, shown by a longer, softer shadow and a small upward shift\" data-level=\"{{level}}\">\n <div class=\"bg-[#24143011] rounded-xl py-8 px-5 flex justify-center\">\n <div class=\"el-tw-card flex items-center justify-center font-bold\" style=\"width:{{size}}px;height:{{size}}px;background:{{background}};border-radius:{{radius}}px;\">level {{level}}</div>\n </div>\n <p class=\"mt-3 text-xs text-[#241430]/80\">elevation level {{level}} of 3</p>\n</div>\n<style>\n.el-tw[data-level=\"0\"] .el-tw-card { box-shadow: none; transform: translateY(0); }\n.el-tw[data-level=\"1\"] .el-tw-card { box-shadow: 0 2px 6px rgba(36,20,48,.18); transform: translateY(-1px); }\n.el-tw[data-level=\"2\"] .el-tw-card { box-shadow: 0 8px 18px rgba(36,20,48,.22); transform: translateY(-4px); }\n.el-tw[data-level=\"3\"] .el-tw-card { box-shadow: 0 18px 36px rgba(36,20,48,.28); transform: translateY(-8px); }\n</style>", "react": "export function Elevation({\n level = \"{{level}}\",\n background = \"{{background}}\",\n radius = {{radius}},\n size = {{size}},\n}) {\n const shadows = {\n \"0\": { boxShadow: \"none\", transform: \"translateY(0)\" },\n \"1\": { boxShadow: \"0 2px 6px rgba(36,20,48,.18)\", transform: \"translateY(-1px)\" },\n \"2\": { boxShadow: \"0 8px 18px rgba(36,20,48,.22)\", transform: \"translateY(-4px)\" },\n \"3\": { boxShadow: \"0 18px 36px rgba(36,20,48,.28)\", transform: \"translateY(-8px)\" },\n }[level];\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"A card floating higher above the surface as its elevation level increases, shown by a longer, softer shadow and a small upward shift\">\n <div style={{ background: \"#24143011\", borderRadius: 12, padding: \"32px 20px\", display: \"flex\", justifyContent: \"center\" }}>\n <div style={{ width: size, height: size, background, borderRadius: radius, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700, ...shadows }}>\n level {level}\n </div>\n </div>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>elevation level {level} of 3</p>\n </div>\n );\n}" }