card

Card

Frames related content such as a product or an order, with header, title, description, action, image, content and footer parts.

States: Default

Parts

Part	File	Does
Card	Card.vue	Groups related content, such as a product or an order, into one framed block.
CardAction	CardAction.vue	Holds a control placed at the end of the card header.
CardContent	CardContent.vue	Holds the main content of the card.
CardDescription	CardDescription.vue	Shows secondary text below the card title.
CardFooter	CardFooter.vue	Holds the closing content of the card, such as status or buttons.
CardHeader	CardHeader.vue	Groups the title, description and action at the top of the card.
CardImage	CardImage.vue	Shows a picture across the top of the card.
CardTitle	CardTitle.vue	Names what the card is about.

Anatomy

<Card>
  <CardImage />
  <CardHeader>
    <CardTitle />
    <CardDescription />
    <CardAction />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>

Styling

Part	Recipe
Card	card
CardAction	card-action
CardContent	card-content
CardDescription	card-description
CardFooter	card-footer
CardHeader	card-header
CardTitle	card-title

Install

Writes 9 files into components/ui/card/. For agents, npx @frontic/ui docs card prints this reference as markdown; the MCP server serves the same.

npm packages: class-variance-authority; reka-ui

API reference

Card Card.vue

Groups related content, such as a product or an order, into one framed block. Renders a <div>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe card	Sets
base: card	14 properties · 9 inherited
contain `inline-size` gap spacing.61.5rem display `flex` flexDirection `column` @md › gap spacing.82rem backgroundColor colors.card#ffffff from @panel textColor colors.card-foreground#09090b from @panel outline ring.hairline1px solid #e4e4e7 from @panel outlineColor colors.foreground/5color-mix(in oklab, #09090b 5%, transparent) from @panel rounded rounded.none0px from @panel shadow shadow.sm0px 1px 3px 0px rgb(0 0 0 / 0.1), 0px 1px 2px -1px rgb(0 0 0 / 0.1) from @panel typography typography.small400 0.875rem/1.43 'Inter Variable', Inter, sans-serif from @panel paddingY spacing.61.5rem from @surface-inset @md › paddingY spacing.82rem from @surface-inset
surface: bare	6 properties

Parts

Anatomy

Styling

Install

API reference

Card Card.vue

CardAction CardAction.vue

CardContent CardContent.vue

CardDescription CardDescription.vue

CardFooter CardFooter.vue

CardHeader CardHeader.vue

CardImage CardImage.vue

CardTitle CardTitle.vue