AGENDA
Nächste Woche
09Revisión de producto09:30 · Sala norte
11Dirección creativa12:00 · Estudio 2
14Lanzamiento18:30 · Remoto
HTML + CSSKarten
Gestapelte Agenda-Karte
Eine Mini-Agenda, in der die nächsten Termine leicht gestapelt liegen und sich beim Hovern geraderücken.
Einstellungen
16px
1x
Code
<article class="uv-ccal"><header><div><small>AGENDA</small><h3>Nächste Woche</h3></div><button>＋</button></header><section><div><b>09</b><span><strong>Produkt-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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Wofür du ihn nutzen kannst
Ein kompakter „Was kommt als Nächstes“-Block für den Startbildschirm einer App: die nächsten Kurse in einer Fitnessstudio-App oder die Termine der Woche im Patientenportal einer Physiopraxis. Die Kalender-Karte liegt zuerst leicht gestapelt, ordnet sich beim Hovern und jede Zeile rückt ein Stück zur Seite, wenn du darauf zeigst.
Drei Termine funktionieren am besten; bei mehr verliert der Stapel seinen Reiz und es wird eine Liste. Die Tageszahl gehört ins farbige Quadrat, der Titel ist das, was man zuerst liest. Der „+“-Button ist nur optisch, verbinde ihn mit deinem eigenen Formular.