Mi coche · Garaje
Cargando a 7,4 kW
68%
342 km
Carga completa a las 23:53
HTML + CSSCards
Electric car charging card
A dashboard card with a segmented LCD battery and a charge limit you drag or set with the arrow keys.
Settings
16px
1x
Code
<article class="uvq07-ev"><header><span class="pl" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3v4M15 3v4M7 7h10v3a5 5 0 0 1-10 0zM12 15v6"/></svg></span><div><h3>My car · Garage</h3><p class="cs"><i></i>Charging at 7.4 kW</p></div></header><div class="rd"><p class="pc"><b>68</b><span>%</span></p><p class="km"><b>342</b> km</p></div><div class="bt" aria-hidden="true"><i class="f" style="--i:0"></i><i class="f" style="--i:1"></i><i class="f" style="--i:2"></i><i class="f" style="--i:3"></i><i class="f" style="--i:4"></i><i class="f" style="--i:5"></i><i class="f" style="--i:6"></i><i class="f" style="--i:7"></i><i class="f" style="--i:8"></i><i class="f" style="--i:9"></i><i class="f" style="--i:10"></i><i class="f" style="--i:11"></i><i class="f" style="--i:12"></i><i class="ch" style="--i:13"></i><i class="ch" style="--i:14"></i><i class="ch" style="--i:15"></i><i class="x" style="--i:16"></i><i class="x" style="--i:17"></i><i class="x" style="--i:18"></i><i class="x" style="--i:19"></i></div><label class="lm"><span>Charge limit</span><output>80 %</output><input type="range" min="50" max="100" step="5" value="80"></label><p class="ft">Fully charged at <b>23:53</b></p></article>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 Cards
See all CardsWhere to use it
Car apps show charging as a bar of glowing segments, and this card follows that language. Twenty CSS grid cells fill to the current level, the ones up to the limit pulse in sequence, and a native range input moves the limit marker and recalculates the finish time. It works for EV apps, smart home panels, energy dashboards and IoT demos.
The main color is the LCD glow, the second the dark panel. Change the current level and the charging rate in the script, and the time and segments follow.