components / 22

marked card

a card should group content without trapping it in a perfect rectangle. the boundary can frame, fill, whisper, or pin.

shadcnnpx shadcn@latest add berkantay/cheez/marked-card

live

playground

outline · vertical

success: reactwaapi

mediaselectedmuted

variant

layout

size

character

ink

<MarkedCard
  variant="outline"
  orientation="vertical"
  size="default"
  tone="orange"
  character="rushed"
>
  <MarkedCardMedia aspect="video" bleed="top" />
  <MarkedCardHeader>
    <MarkedCardEyebrow>collection / 01</MarkedCardEyebrow>
    <MarkedCardTitle>marks that feel human</MarkedCardTitle>
    <MarkedCardDescription>sixty responsive pen marks.</MarkedCardDescription>
  </MarkedCardHeader>
  <MarkedCardFooter>...</MarkedCardFooter>
</MarkedCard>

boundary

four ways to hold content

same slots, different pressure

composition

slots stay ordinary

reorder what the content needs

02 · content can contain lists, forms, charts, or nothing at all.

native html

media

vertical and horizontal stories

one responsive orientation prop

choice

selection belongs to the control

the card only draws the state

notes

pin what cannot disappear

static paper, drawn attention

reference

api

root and semantic slots

prop	type	default	purpose
`variant`	`"outline" \| "filled" \| "quiet" \| "pinned"`	`"outline"`	boundary treatment
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	media and copy layout
`size`	`"compact" \| "default" \| "large"`	`"default"`	padding and type scale
`tone`	`MarkedCardTone`	`"neutral"`	built-in ink palette
`color`	`string`	`tone color`	boundary or fill override
`foregroundColor`	`string`	`variant-aware`	content color override
`frameMark`	`CheezType`	`"rounded-box"`	outline and pinned boundary
`fillMark`	`CheezType`	`"marker-swipe"`	filled surface drawing
`quietMark`	`CheezType`	`"long-underline"`	quiet baseline drawing
`pinMark`	`CheezType`	`"asterisk"`	pinned decoration
`pinColor`	`string`	`card color`	pin ink override
`selected`	`boolean`	`false`	visual selection boundary
`selectedMark`	`CheezType`	`"corner-box"`	selection perimeter
`selectedColor`	`string`	`"#b7ff3c"`	selection ink
`interactive`	`boolean`	`false`	focus-within boundary emphasis
`muted`	`boolean`	`false`	de-emphasized card state
`character`	`CheezCharacter`	`"rushed"`	drawing personality
`thickness`	`number`	`1`	pen weight
`Title.level`	`2 \| 3 \| 4`	`3`	semantic heading level
`Media.aspect`	`"auto" \| "square" \| "video" \| "wide"`	`"auto"`	reserved media ratio
`Media.bleed`	`"none" \| "top" \| "inline" \| "all"`	`"none"`	media relation to card padding

behavior notes

the root is an article; heading level remains explicit through MarkedCardTitle
selection is visual only—the nested button, checkbox, or radio must own the interactive semantics
interactive emphasizes the Cheez boundary on hover and focus-within without making the whole article clickable
filled cards use a solid clipped color surface rather than a gradient
horizontal cards collapse to a vertical reading order on narrow screens
media bleed changes layout only; it never changes the child media semantics

marked card

playground

marks that feel human

four ways to hold content

draw the boundary

occupy the surface

let the copy lead

keep this visible

slots stay ordinary

a card is composition, not configuration.

vertical and horizontal stories

underline the sentence people should remember.

the registry now has a voice.

selection belongs to the control

free

$12

$39

pin what cannot disappear

the mark explains the state. color confirms it.

motion belongs to the ink, not the whole interface.

clear first. human second. decorative never.

api

behavior notes