Edit Hover

Name

Also known as (comma separated)

Brief definition Pointer over an element.

Notes **Interaction States:** Pointer is over the element.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Card title", "default": "Trail running shoe" }, { "id": "style", "type": "select", "label": "Hover style", "default": "lift", "options": [ "lift", "glow", "border" ] }, { "id": "hovered", "type": "toggle", "label": "Show hovered", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"hover-demo\" style=\"--accent:{{accent}};\">\n <div class=\"hover-demo__card hover-demo__card--{{style}}{{#if hovered}} is-hovered{{/if}}\">\n <div class=\"hover-demo__thumb\"></div>\n <p class=\"hover-demo__title\">{{title}}</p>\n </div>\n <p class=\"hover-demo__caption\">{{#if hovered}}shown as if the pointer is over the card{{/if}}{{unless hovered}}rest state &mdash; move your pointer over it{{/unless}}</p>\n</div>\n<style>\n.hover-demo { width: 220px; font: 14px system-ui, sans-serif; color: #241430; }\n.hover-demo__card { border-radius: 12px; padding: 14px; background: #FAF7F2; border: 1.5px solid #24143022; }\n@media (prefers-reduced-motion: no-preference) {\n.hover-demo__card { transition: transform .15s, box-shadow .15s, border-color .15s; }\n}\n.hover-demo__thumb { height: 80px; border-radius: 8px; background: #24143014; margin-bottom: 10px; }\n.hover-demo__title { margin: 0; font-weight: 600; font-size: 13px; }\n.hover-demo__card--lift:hover, .hover-demo__card--lift.is-hovered { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(36,20,48,.18); }\n.hover-demo__card--glow:hover, .hover-demo__card--glow.is-hovered { box-shadow: 0 0 0 4px var(--accent); }\n.hover-demo__card--border:hover, .hover-demo__card--border.is-hovered { border-color: var(--accent); }\n.hover-demo__caption { margin-top: 10px; font-size: 12px; color: #241430aa; }\n</style>", "tailwind": "<div style=\"width:220px;font-family:system-ui,sans-serif;color:#241430\">\n <div class=\"hover-tw hover-tw--{{style}}{{#if hovered}} is-hovered{{/if}} rounded-xl p-3.5 motion-safe:transition-all border-[1.5px]\" style=\"background:#FAF7F2;border-color:#24143022\">\n <div class=\"h-20 rounded-lg mb-2.5 bg-[#24143014]\"></div>\n <p class=\"m-0 font-semibold text-[13px]\">{{title}}</p>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430aa]\">{{#if hovered}}shown as if the pointer is over the card{{/if}}{{unless hovered}}rest state &mdash; move your pointer over it{{/unless}}</p>\n</div>\n<style>\n.hover-tw--lift:hover, .hover-tw--lift.is-hovered { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(36,20,48,.18); }\n.hover-tw--glow:hover, .hover-tw--glow.is-hovered { box-shadow: 0 0 0 4px {{accent}}; }\n.hover-tw--border:hover, .hover-tw--border.is-hovered { border-color: {{accent}}; }\n</style>", "react": "export function HoverCard({\n title = \"{{title}}\",\n style = \"{{style}}\",\n hovered = {{hovered}},\n accent = \"{{accent}}\",\n}) {\n const active = {\n lift: { transform: \"translateY(-4px)\", boxShadow: \"0 14px 26px rgba(36,20,48,.18)\" },\n glow: { boxShadow: \"0 0 0 4px \" + accent },\n border: { borderColor: accent },\n }[style];\n return (\n <div style={{ width: 220, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <div className=\"hover-card\" style={{ borderRadius: 12, padding: 14, background: \"#FAF7F2\", border: \"1.5px solid #24143022\", ...(hovered ? active : {}) }}>\n <div style={{ height: 80, borderRadius: 8, background: \"#24143014\", marginBottom: 10 }} />\n <p style={{ margin: 0, fontWeight: 600, fontSize: 13 }}>{title}</p>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430aa\" }}>{hovered ? \"shown as if the pointer is over the card\" : \"rest state \\u2014 move your pointer over it\"}</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .hover-card { transition: transform .15s, box-shadow .15s, border-color .15s; }\n }\n `}</style>\n </div>\n );\n}" }