← All elements
<div class="sn"><div style="--r:-4deg;--c:#fde68a">Buy milk</div><div style="--r:3deg;--c:#fbcfe8">Call Sam</div><div style="--r:-2deg;--c:#bbf7d0">Ship v2</div></div>About this card
Slightly rotated sticky notes with a folded corner and a pin, in warm colours with a lift on hover.
How it works
Each note is rotated with a custom property, has a folded corner made by clip-path and a red pin from a pseudo-element. On hover it straightens and lifts. The board uses an inset shadow for a frame.
Ways to customise it
- Change the note colours.
- Edit the text and the handwriting font.
- Add more notes.
Good to know
Handwriting fonts are less readable, so keep notes short. clip-path cuts any shadow, so the shadow is placed on the outer element in production.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.