AGENDA
Próxima semana
09Revisión de producto09:30 · Sala norte
11Dirección creativa12:00 · Estudio 2
14Lanzamiento18:30 · Remoto
HTML + CSSCards
Agenda apilada
Una miniagenda en la que los próximos eventos están algo apilados y se ordenan al pasar el ratón.
Ajustes
16px
1x
Código
<article class="uv-ccal"><header><div><small>AGENDA</small><h3>Próxima semana</h3></div><button>＋</button></header><section><div><b>09</b><span><strong>Revisión de producto</strong><small>09:30 · Sala norte</small></span></div><div><b>11</b><span><strong>Dirección creativa</strong><small>12:00 · Estudio 2</small></span></div><div><b>14</b><span><strong>Lanzamiento</strong><small>18:30 · Remoto</small></span></div></section></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
Dónde usarlo
Un bloque compacto de «lo siguiente» para la pantalla de inicio de una app: las próximas clases en la app de un gimnasio o las citas de la semana en el portal de pacientes de un fisio. La tarjeta de calendario empieza algo apilada, se alinea al pasar el ratón y cada fila se desplaza al señalarla.
Con tres eventos queda mejor; si pones más, el efecto apilado se pierde y se convierte en una lista. El número del día va en el cuadrado de color y el título es lo que se lee primero. El botón «+» es solo visual: conéctalo a tu propio formulario.