About this component
Sticky Note Card
A sticky note card with a folded corner and push pin for founder notes and playful reminders.
Usage
The import and the props worth knowing about, in one place.
import { Card18 } from "@/components/beste/component/card18";
<Card18
text="Ship the landing page first. Everything else can wait until Monday."
from="PS: coffee is on me"
/>
<Card18
text="Beta invites go out Friday."
unpinned // hide the push pin
tone="mint" // paper: "yellow" (default) | "pink" | "mint" | "sky"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The note text |
from | string | — | Small monospace line at the bottom (e.g. "PS: coffee is on me") |
unpinned | boolean | — | Hide the push pin |
tone | "yellow" | "pink" | "mint" | "sky" | — | Paper color |
className | string | — | Additional classes merged onto the root |
More Card components
View all Card
Brand systems
Brand systems
Identity, guidelines, and design tokens that scale across every touchpoint of your product.