AGENDA
Semaine prochaine
09Revisión de producto09:30 · Sala norte
11Dirección creativa12:00 · Estudio 2
14Lanzamiento18:30 · Remoto
HTML + CSSCartes
Carte agenda empilée
Un mini agenda où les prochains rendez-vous sont légèrement empilés et se remettent en ligne au survol.
Réglages
16px
1x
Code
<article class="uv-ccal"><header><div><small>AGENDA</small><h3>Semaine prochaine</h3></div><button>＋</button></header><section><div><b>09</b><span><strong>Revue produit</strong><small>09:30 · Sala norte</small></span></div><div><b>11</b><span><strong>Direction artistique</strong><small>12:00 · Estudio 2</small></span></div><div><b>14</b><span><strong>Lancement</strong><small>18:30 · Remoto</small></span></div></section></article>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Où l’utiliser
Un bloc « à venir » compact pour l'écran d'accueil d'une application : les prochains cours dans l'appli d'une salle de sport ou les rendez-vous de la semaine sur l'espace patient d'un kiné. Cette carte calendrier démarre légèrement empilée, s'aligne au survol et chaque ligne glisse un peu quand on la pointe.
Trois rendez-vous, c'est l'idéal ; au-delà, l'effet d'empilement se perd et l'on retombe sur une simple liste. Le numéro du jour va dans le carré coloré, le titre est ce qu'on lit en premier. Le bouton « + » est purement visuel : reliez-le à votre formulaire.