Leer 20 minutos
Últimas 12 semanas
23 días
HTML + CSSCards
Racha de hábitos
Un mapa de calor de 12 semanas con la racha actual; marca hoy como hecho y la llama crece.
Ajustes
16px
1x
Código
<article class="uv-khs"><header><div><h3>Leer 20 minutos</h3><p>Últimas 12 semanas</p></div><span class="fl" aria-live="polite"><span class="em" aria-hidden="true">🔥</span><b>23</b> <span>días</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>Hecho hoy</span></button></article>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Ver todos: CardsDónde usarlo
Los registros de hábitos motivan con un historial visible y un mapa de calor es la forma más clara de enseñar constancia. Esta tarjeta coloca doce semanas de días en una rejilla con intensidad por color, resalta el día de hoy y muestra la racha actual con una llama. Al pulsar el botón, la casilla de hoy se llena con un salto y la racha suma un día.
Para datos reales, pon un nivel de 0 a 4 en cada casilla. El botón lleva aria-pressed y la racha es una región viva, así que el cambio se anuncia a quien usa lector de pantalla.