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
Alle ansehen: KartenWofü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.