Distance Badge — StealThis.dev

程式碼

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f9fafb;
  min-height: 100vh;
  padding: 40px 24px;
  display: flex;
  justify-content: center;
}

.demo {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
  margin-bottom: 4px;
}
.section-label:first-child {
  margin-top: 0;
}

.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Base distance badge */
.dist-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.dist-badge--drive {
  background: #eff6ff;
  color: #1d4ed8;
}
.dist-badge--transit {
  background: #fef3c7;
  color: #92400e;
}
.dist-badge--bike {
  background: #dcfce7;
  color: #166534;
}

.dist-badge--near {
  background: #dcfce7;
  color: #166534;
}
.dist-badge--mid {
  background: #fef3c7;
  color: #92400e;
}
.dist-badge--far {
  background: #fee2e2;
  color: #991b1b;
}

/* Pill variant */
.dist-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.dist-pill--drive {
  background: #dbeafe;
  color: #1d4ed8;
}
.dist-pill--open {
  background: #dcfce7;
  color: #166534;
}
.dist-pill--closed {
  background: #fee2e2;
  color: #991b1b;
}

/* Listing card */
.listing-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  margin-top: 8px;
}

.listing-thumb {
  width: 48px;
  height: 48px;
  background: #eef2ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.listing-body {
  flex: 1;
}
.listing-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}
.listing-addr {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}
.listing-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

// Pure CSS — no JavaScript required

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Distance Badge</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo">
  <h2 class="section-label">Transport modes</h2>
  <div class="row">
    <div class="dist-badge">🚶 0.4 km · 5 min</div>
    <div class="dist-badge dist-badge--drive">🚗 2.1 km · 8 min</div>
    <div class="dist-badge dist-badge--transit">🚇 1.8 km · 12 min</div>
    <div class="dist-badge dist-badge--bike">🚲 1.2 km · 6 min</div>
  </div>

  <h2 class="section-label">Distance colors</h2>
  <div class="row">
    <div class="dist-badge dist-badge--near">📍 0.2 km · Nearby</div>
    <div class="dist-badge dist-badge--mid">📍 3.5 km · Moderate</div>
    <div class="dist-badge dist-badge--far">📍 12 km · Far</div>
  </div>

  <h2 class="section-label">Compact / pill</h2>
  <div class="row">
    <div class="dist-pill">5 min walk</div>
    <div class="dist-pill dist-pill--drive">12 min drive</div>
    <div class="dist-pill dist-pill--open">Open</div>
    <div class="dist-pill dist-pill--closed">Closed</div>
  </div>

  <h2 class="section-label">On a listing card</h2>
  <div class="listing-card">
    <div class="listing-thumb">🏢</div>
    <div class="listing-body">
      <p class="listing-name">Acme Office</p>
      <p class="listing-addr">350 5th Ave, New York</p>
      <div class="listing-meta">
        <div class="dist-badge dist-badge--near" style="font-size:11px;padding:3px 8px;">📍 0.4 km</div>
        <div class="dist-badge" style="font-size:11px;padding:3px 8px;">🚶 5 min</div>
        <div class="dist-pill dist-pill--open" style="font-size:11px;padding:2px 8px;">Open</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Collection of distance indicator badges with transport mode icons (walking, driving, transit), distance in km/mi, estimated time, and color variants (nearby/moderate/far). CSS-only, zero JS.