AGENDA
Next week
09Revisión de producto09:30 · Sala norte
11Dirección creativa12:00 · Estudio 2
14Lanzamiento18:30 · Remoto
HTML + CSSCards
Stacked agenda card
A mini agenda where upcoming events sit slightly stacked and straighten out when you hover the card.
Settings
16px
1x
Code
<article class="uv-ccal"><header><div><small>AGENDA</small><h3>Next week</h3></div><button>＋</button></header><section><div><b>09</b><span><strong>Product review</strong><small>09:30 · Sala norte</small></span></div><div><b>11</b><span><strong>Creative direction</strong><small>12:00 · Estudio 2</small></span></div><div><b>14</b><span><strong>Launch</strong><small>18:30 · Remoto</small></span></div></section></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
Where to use it
A compact “what's next” block for the home screen of an app: upcoming classes in a gym app, the week's appointments in a physio's patient portal or the next shifts in a staff rota app. This calendar card starts slightly stacked, lines up on hover, and each row slides a little as you point at it.
Three events work best; with more, the stacked effect fades and it becomes a plain list. Put the day number in the colored square and let the title be the thing people read first. The “+” button is only visual, so connect it to your own form.