Car dashboard warning lights
Car warning icons that light up amber or red and explain the alert on a small scanline display.
Settings
Code
<div class="uvq08-car" role="group" aria-label="Car warnings"><div class="wl"><span class="wr" style="--w:var(--c1)"><button type="button" aria-label="Tire pressure" aria-describedby="uvq08-car-0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 19C4.9 17.4 4 15.3 4 13s.9-4.4 2.5-6M17.5 19c1.6-1.6 2.5-3.7 2.5-6s-.9-4.4-2.5-6M6.5 19h11M12 8.5V13"/><circle cx="12" cy="16" r=".6"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-0"><span class="cd">TPMS</span><span class="ms">Low pressure in the rear left tire</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Engine oil" aria-describedby="uvq08-car-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h5l2-2h3l6-1.5-4 6.5H6a2 2 0 0 1-2-2zM11 8V6.5M9.5 6.5h3"/><path d="M20 14c.6.9.9 1.5.9 1.9a.9.9 0 0 1-1.8 0c0-.4.3-1 .9-1.9z"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-1"><span class="cd">OIL</span><span class="ms">Low oil level</span></span></span><span class="wr pk" style="--w:var(--c1)"><button type="button" aria-label="Fuel" aria-describedby="uvq08-car-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="9" height="16" rx="1.5"/><path d="M5 10h9M14 8l3 2v7a1.5 1.5 0 0 0 3 0V9l-2.5-2.5"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-2"><span class="cd">FUEL</span><span class="ms">Reserve: 48 km left</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Seat belt" aria-describedby="uvq08-car-3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="4.8" r="2"/><path d="M8 21v-6l-2-4 3-3.5h4l2 4.5h3M8.5 8.5L15.5 18"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-3"><span class="cd">BELT</span><span class="ms">Fasten your seat belt</span></span></span></div><div class="od" aria-hidden="true"><span>ODO</span><b>048213</b><span>km</span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Tooltips
See all TooltipsWhere to use it
A dark instrument cluster with four warning lights for tire pressure, oil, fuel and seat belt. Hover or focus one and it flickers on with a colored glow while a monospaced display opens from a thin line, like a dashboard screen waking up, with a code tag and the message. It suits car apps, fleet tools, IoT dashboards and device status panels.
The main color is used for warnings and the second for critical alerts. Assign each icon its level through a CSS variable, and keep messages short and uppercase so they read like the real thing.