Edit Media Query

Name

Also known as (comma separated)

Brief definition Query based on viewport/device features.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "viewportWidth", "type": "select", "label": "Simulated viewport", "default": "320px", "options": [ "320px", "480px", "800px" ] }, { "id": "breakpoint", "type": "number", "label": "Breakpoint (min-width)", "default": 480, "min": 300, "max": 700, "step": 20 }, { "id": "accent", "type": "color", "label": "Chip colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mq-wrap\" role=\"img\" aria-label=\"A row of chips that stack vertically below the breakpoint and lay out horizontally at or above it, like a media query switching layout by width\">\n <div class=\"mq-frame\" style=\"width:{{viewportWidth}};--bp:{{breakpoint}}px;\">\n <div class=\"mq-row\">\n <div class=\"mq-chip\" style=\"background:{{accent}};\">One</div>\n <div class=\"mq-chip\" style=\"background:{{accent}};\">Two</div>\n <div class=\"mq-chip\" style=\"background:{{accent}};\">Three</div>\n </div>\n </div>\n <p class=\"mq-caption\">viewport {{viewportWidth}} &middot; @media (min-width: {{breakpoint}}px) switches the row from stacked to inline</p>\n</div>\n<style>\n.mq-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; }\n.mq-frame { container-type: inline-size; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; box-sizing: border-box; background: #FAF7F2; }\n.mq-row { display: flex; flex-direction: column; gap: 8px; }\n.mq-chip { border-radius: 6px; padding: 10px; text-align: center; font-weight: 700; }\n@container (min-width: 480px) { .mq-row { flex-direction: row; } }\n.mq-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; width: 320px; }\n</style>", "tailwind": "<div class=\"mq-tw font-sans text-[#241430]\" role=\"img\" aria-label=\"A row of chips that stack vertically below the breakpoint and lay out horizontally at or above it, like a media query switching layout by width\">\n <div class=\"mq-tw-frame border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 box-border bg-[#FAF7F2]\" style=\"width:{{viewportWidth}};container-type:inline-size;\">\n <div class=\"mq-tw-row flex flex-col gap-2\">\n <div class=\"rounded-md p-2.5 text-center font-bold\" style=\"background:{{accent}};\">One</div>\n <div class=\"rounded-md p-2.5 text-center font-bold\" style=\"background:{{accent}};\">Two</div>\n <div class=\"rounded-md p-2.5 text-center font-bold\" style=\"background:{{accent}};\">Three</div>\n </div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80 w-[320px]\">viewport {{viewportWidth}} &middot; @media (min-width: {{breakpoint}}px) switches the row from stacked to inline</p>\n</div>\n<style>\n@container (min-width: 480px) { .mq-tw-row { flex-direction: row; } }\n</style>", "react": "export function MediaQueryDemo({\n viewportWidth = \"{{viewportWidth}}\",\n breakpoint = {{breakpoint}},\n accent = \"{{accent}}\",\n}) {\n const chip = { background: accent, borderRadius: 6, padding: 10, textAlign: \"center\", fontWeight: 700 };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\" }}\n role=\"img\" aria-label=\"A row of chips that stack vertically below the breakpoint and lay out horizontally at or above it, like a media query switching layout by width\">\n <style>{`@container mq (min-width: ${breakpoint}px) { .mq-row { flex-direction: row; } }`}</style>\n <div style={{ containerType: \"inline-size\", containerName: \"mq\", width: viewportWidth, border: \"1.5px dashed #24143055\",\n borderRadius: 8, padding: 12, boxSizing: \"border-box\", background: \"#FAF7F2\" }}>\n <div className=\"mq-row\" style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n <div style={chip}>One</div><div style={chip}>Two</div><div style={chip}>Three</div>\n </div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\", width: 320 }}>\n viewport {viewportWidth} &middot; @media (min-width: {breakpoint}px) switches the row from stacked to inline\n </p>\n </div>\n );\n}" }