UI Components Easy
Distance Badge
Distance indicator badges for maps and listings — km/mi, walking/driving/transit icons, and ETA variants. Pure CSS.
Open in Lab
MCP
css
Targets: JS HTML
Code
*,
*::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.