Scooter Ride Summary
A wide ride card with a red scooter illustration, date, distance, average speed and duration.
Preview and code
index.html
<div class='sc'><div class='im'><svg viewBox='0 0 120 80' width='100%' height='100%'><circle cx='28' cy='62' r='9' fill='#222'/><circle cx='98' cy='62' r='9' fill='#222'/><path d='M28 62 L48 30 H78 L98 62 M78 30 L86 14 H98' fill='none' stroke='#e4322b' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/><path d='M40 50 H84 L90 62 H46 Z' fill='#e4322b'/><rect x='54' y='28' width='24' height='6' rx='3' fill='#222'/></svg></div><div class='tx'><header><b>Electric Scooter</b><svg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='#10b981' stroke-width='2'><path d='M5 19c0-8 5-14 15-14 0 10-6 15-14 15M5 19c3-5 6-7 10-9'/></svg></header><small>17 Aug 2026</small><div class='st'><div><em>Distance</em><b>3.2km</b></div><div><em>Avg speed</em><b>18.4km/h</b></div><div><em>Duration</em><b>22 min</b></div></div></div></div>
styles.css
.sc{display:flex;gap:14px;width:min(380px,94%);margin:auto;padding:10px;background:#fff;border-radius:28px;box-shadow:0 12px 32px rgba(0,0,0,.12);font-family:Inter,Arial,sans-serif;color:#111}.im{flex:none;width:110px;display:grid;place-items:center;background:#f3f3f3;border-radius:20px;padding:6px}.tx{flex:1;min-width:0;padding:6px 6px 4px 0}.tx header{display:flex;justify-content:space-between;align-items:center}.tx b{font-size:15px}.tx small{display:block;margin:3px 0 12px;font-size:11px;color:#888}.st{display:flex;justify-content:space-between;gap:8px}.st em{display:block;font-style:normal;font-size:9px;color:#888}.st b{display:block;margin-top:2px;font-size:12px}
About
A trip summary widget: SVG scooter on a pale panel, title with leaf icon, date and three stat columns.