Pulsa una nota para fijarla
Notizzettel an der Pinnwand
Lose Zettel auf einer Korkwand: Ein Klick lässt eine Pinnnadel fallen, der Zettel richtet sich auf und haftet; gelöst, schwingt er nach.
Einstellungen
Code
<div class="uvq15-pin"><div class="bd"><button type="button" class="nt" style="--c:var(--c2);--r:-5deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Brot und Kaffee kaufen</span></button><button type="button" class="nt" style="--c:#fbcfe8;--r:4deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Ana um 5 anrufen</span></button><button type="button" class="nt" style="--c:#bbf7d0;--r:-2deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Ideen für das Logo</span></button></div><p class="hd">Tippe auf einen Zettel, um ihn anzuheften</p></div>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 Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Anheften ist eine typische Aktion in Boards, Notiz-Apps und Dashboards, und dieser Block zeigt sie mit einer echten Korkwand. Lose Zettel hängen leicht schräg mit tiefem Schatten; ein Klick lässt eine rote Pinnnadel von oben fallen, der Zettel richtet sich auf und liegt flach am Kork. Ein zweiter Klick löst die Nadel, und der Zettel pendelt kurz nach.
Die Hauptfarbe färbt den Nadelkopf, die Zweitfarbe den ersten Zettel, die anderen beiden bleiben rosa und mintgrün. Jeder Zettel ist ein Umschalt-Button mit aria-pressed, Screenreader melden also, ob er angeheftet ist. Die Handschrift nutzt nur Systemschriften.