Leer 20 minutos
Últimas 12 semanas
23 días
HTML + CSSCards
Habit streak card with heatmap
A 12-week heatmap with the current streak; mark today as done and the flame grows.
Settings
16px
1x
Code
<article class="uv-khs"><header><div><h3>Read for 20 minutes</h3><p>Last 12 weeks</p></div><span class="fl" aria-live="polite"><span class="em" aria-hidden="true">🔥</span><b>23</b> <span>days</span></span></header><div class="hm"><i data-l="0"></i><i data-l="3"></i><i data-l="1"></i><i data-l="0"></i><i data-l="2"></i><i data-l="1"></i><i data-l="0"></i><i data-l="4"></i><i data-l="1"></i><i data-l="0"></i><i data-l="0"></i><i data-l="0"></i><i data-l="2"></i><i data-l="3"></i><i data-l="0"></i><i data-l="0"></i><i data-l="2"></i><i data-l="2"></i><i data-l="0"></i><i data-l="0"></i><i data-l="0"></i><i data-l="4"></i><i data-l="2"></i><i data-l="3"></i><i data-l="1"></i><i data-l="1"></i><i data-l="1"></i><i data-l="0"></i><i data-l="0"></i><i data-l="1"></i><i data-l="0"></i><i data-l="0"></i><i data-l="2"></i><i data-l="0"></i><i data-l="2"></i><i data-l="0"></i><i data-l="4"></i><i data-l="0"></i><i data-l="1"></i><i data-l="3"></i><i data-l="0"></i><i data-l="4"></i><i data-l="0"></i><i data-l="0"></i><i data-l="0"></i><i data-l="1"></i><i data-l="0"></i><i data-l="2"></i><i data-l="0"></i><i data-l="1"></i><i data-l="1"></i><i data-l="4"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="4"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="2"></i><i data-l="3"></i><i data-l="1"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="3"></i><i data-l="2"></i><i data-l="2"></i><i data-l="4"></i><i data-l="1"></i><i data-l="2"></i><i data-l="2"></i><i data-l="2"></i><i data-l="1"></i><i data-l="2"></i><i data-l="3"></i><i data-l="4"></i><i data-l="1"></i><i data-l="2"></i><i data-l="4"></i><i data-l="3"></i><i data-l="1"></i><i data-l="2"></i><i data-l="0" class="td"></i></div><button type="button" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Done today</span></button></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
Habit trackers motivate with a visible history, and a heatmap is the clearest way to show consistency. This card lays out twelve weeks of days in a grid shaded by intensity, outlines today, and shows the current streak with a flame badge. Pressing the button fills today's square with a pop and adds one day to the streak.
Feed real data by setting a level from 0 to 4 on each square. The button is a toggle with aria-pressed and the streak badge is a live region, so the change is announced to screen reader users.