← back to Homesonspec
design-system/components/home-card/index.html
44 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>Home card</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&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}
.card{width:320px;border-radius:20px;background:#fff;border:1px solid rgba(180,222,218,.5);overflow:hidden;
box-shadow:0 1px 2px rgba(16,50,49,.05),0 8px 24px -14px rgba(16,50,49,.2)}
.photo{height:170px;background:linear-gradient(135deg,#1e5654,#2f8783);position:relative}
.photo .status{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;
background:#fff;border-radius:999px;padding:3px 10px;font:500 12px/1.4 'Inter';color:#8d4114}
.photo .status .dot{width:8px;height:8px;border-radius:50%;background:#16a34a}
.body{padding:14px 16px 16px}
.price{font-family:'Fraunces',serif;font-weight:600;font-size:24px;letter-spacing:-.01em}
.addr{font-size:14px;color:#123231;margin-top:2px}
.meta{display:flex;gap:14px;font-size:13px;color:#5b6b6a;margin-top:8px}
.foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid #eef2f1}
.verified{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font:500 11px/1.4 'Inter';
background:#f0f9f8;color:#1e5654;box-shadow:inset 0 0 0 1px #b4deda}
.builder{font-size:12px;color:#5b6b6a}
</style>
</head>
<body>
<p class="eyebrow">Home card</p>
<div class="card">
<div class="photo"><span class="status"><i class="dot"></i>Move-in ready</span></div>
<div class="body">
<div class="price">$438,990</div>
<div class="addr">1420 Marigold Trace, Leander, TX</div>
<div class="meta"><span>4 bd</span><span>3 ba</span><span>2,410 sqft</span></div>
<div class="foot">
<span class="verified">✓ Verified from source</span>
<span class="builder">Lennar</span>
</div>
</div>
</div>
</body>
</html>