> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Marker Checklist Card > A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows # Marker Checklist Card A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows **Marker Checklist Card** ```html marker-checklist-card.html theme={null} Marker Checklist Card ``` Copy npx hyperframes add marker-checklist-card to the clipboard That writes `compositions/components/marker-checklist-card.html`, plus 2 supporting files under `assets/fonts/`. ## Paste it into your composition Open `compositions/components/marker-checklist-card.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `top` | `THE POWER` | string | First marker line. | | `mid` | `OF` | string | Small connecting word under the underline. | | `circled` | `ONE` | string | The word the marker ellipse draws around. | | `rest` | `FILE` | string | The rest of the bottom line. | | `l1` | `WRITE` | string | Typewriter label of row 1. | | `v1` | `HTML` | string | Marker value of row 1. | | `l2` | `RENDER` | string | Typewriter label of row 2. | | `v2` | `IN 4K` | string | Marker value of row 2. | | `l3` | `SHIP` | string | Typewriter label of row 3. | | `v3` | `TODAY` | string | Marker value of row 3. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap theme={null}
``` Tagged `motion-primitive` `handwritten` `checklist` `paper` `marker`. Created by Miao Yang. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md) ## Related topics - [Notes Reveal](/catalog/blocks/notes-reveal.md) - [Orbit Card](/catalog/blocks/orbit-card.md) - [Card Resize](/catalog/components/card-resize.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.