Dog-ear page checkbox
A book page that folds its corner down when checked, the way you mark where you stopped reading.
Settings
Code
<label class="uvq02-dog"><input type="checkbox"><span class="pg"><span class="ls" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="tx">Mark this page</span><span class="nm" aria-hidden="true">87</span></span><span class="ea" aria-hidden="true"></span></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
See all CheckboxesWhere to use it
This checkbox is a whole page of a book, with greyed lines of text, a page number and a label. Checking it folds the top right corner down with a springy motion, showing the coloured back of the paper and a soft shadow, the classic dog-ear that marks a page. Hovering lifts the corner slightly. It fits reading apps, bookmarks, saved articles and study tools.
The main color is the back of the fold and the secondary color the paper. A registered CSS property drives the fold, so the size and spring are easy to tweak, and several pages side by side make a lively reading list.