← back to Homesonspec
design-system/components/map-legend/index.html
34 lines
<!-- @dsCard group="Components" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Map legend + filter toggle</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
body{font-family:'Inter',system-ui,sans-serif;margin:0;background:#f7faf9;padding:32px;color:#0f2b2a}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:#226b69;margin-bottom:14px}
.panel{width:250px;border-radius:16px;background:#fff;border:1px solid rgba(180,222,218,.5);padding:14px;
box-shadow:0 1px 2px rgba(16,50,49,.05),0 8px 24px -14px rgba(16,50,49,.2)}
.grp{font:600 11px/1 'Inter';text-transform:uppercase;letter-spacing:.1em;color:#5b6b6a;margin:4px 0 8px;display:flex;justify-content:space-between}
.grp a{color:#226b69;text-transform:none;letter-spacing:0;font-weight:600;text-decoration:none}
.opt{display:flex;align-items:center;gap:9px;padding:5px 4px;font-size:14px;border-radius:8px}
.opt:hover{background:#f0f9f8}
.opt input{accent-color:#1e5654;width:15px;height:15px}
.dot{width:11px;height:11px;border-radius:50%}
.count{margin-left:auto;font-size:12px;color:#93a3a2}
</style>
</head>
<body>
<p class="eyebrow">Map legend & field toggle</p>
<div class="panel">
<div class="grp"><span>Construction status</span><a href="#">All</a></div>
<label class="opt"><input type="checkbox" checked><i class="dot" style="background:#16a34a"></i>Move-in ready<span class="count">990</span></label>
<label class="opt"><input type="checkbox" checked><i class="dot" style="background:#f59e0b"></i>Under construction<span class="count">10,995</span></label>
<label class="opt"><input type="checkbox" checked><i class="dot" style="background:#3b82f6"></i>Planned<span class="count">117</span></label>
</div>
<p style="width:250px;font-size:13px;color:#5b6b6a;margin-top:10px">Every field value is an on/off toggle (default all-on, AND across dimensions). Dot colors are the shared construction-status tokens; counts update live.</p>
</body>
</html>