Data Display

Card

A bordered container for grouping related content, with optional title and actions.

Install

import { Card } from 'vael-ui'

title

description

interactive

import { Card } from 'vael-ui'

<Card title="" description="" as="div" :interactive="false">Card</Card>

Name	Type	Default	Description
`title`	`string \| undefined`		Default header title; ignored when `#header` is used.
`description`	`string \| undefined`		Default header description; ignored when `#header` is used.
`as`	`string \| undefined`	`"div"`	Root tag — `'a'`/`'button'` for a fully interactive card.
`interactive`	`boolean \| undefined`	`false`	Hover/press affordance. Implied (always on) when `as` is `'a'` or `'button'`.
`ui`	`Partial<{ root: UiPartValue; header: UiPartValue; title: UiPartValue; description: UiPartValue; body: UiPartValue; footer: UiPartValue; }> \| undefined`

Name	Type	Description
`default`	`any`
`header`	`any`	Replaces the default title/description header.
`footer`	`any`

No events.

Name	Type	Description
`el`	`HTMLElement \| null`