Card surface for composing login flows, sign-up forms, pricing tiles, payment methods, empty states, and stat showcases.

import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@plexui/vue/components/Card";

Examples

Overview

Create project

Payment Method

No team members (empty state)

How did you hear about us?

Processing your request

Pricing

Anatomy

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
    <CardAction />  <!-- optional top-right slot -->
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>

API

Card

Prop	Type	Default	Description
`variant`	`"outline" \| "solid" \| "ghost"`	`"outline"`	Visual variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Padding scale
`interactive`	`boolean`	`false`	Adds hover and focus affordances. Automatic when `href` is set.
`href`	`string`		Renders the Card as a link via the `linkComponent` of `PlexUIProvider`. A link component that takes `to`, such as `RouterLink`, gets it as `to`.
`external`	`boolean`	auto-detected	Forces `target="_blank"` and `rel="noopener noreferrer"` when `href` is set.
`as`	`Component \| "a"`		Overrides the link component.
`class`	`string`		Applied to the root element

All other attributes and listeners fall through to the root <div> or link.

Compound parts

Part	Element	Purpose
`CardHeader`	`<div>`	Title + description + optional action
`CardTitle`	`<h3>`	Card heading
`CardDescription`	`<p>`	Subtitle / explanation
`CardContent`	`<div>`	Primary body region
`CardFooter`	`<div>`	Trailing actions row
`CardAction`	`<div>`	Absolute top-right slot inside `CardHeader`

Styling

Card reads these component tokens. Override them at any scope to restyle it:

--card-background: background (default var(--color-surface))
--card-background-hover: background hover (default var(--color-surface-secondary))
--card-border-color: border color (default var(--color-border))
--card-border-color-hover: border color hover (default var(--color-border-primary-outline-hover))
--card-description-color: description color (default var(--color-text-tertiary))
--card-description-font-size: description font size (default var(--font-text-sm-size))
--card-font-size: font size (default var(--font-text-sm-size))
--card-radius: radius (default var(--radius-xl))
--card-text-color: text color (default var(--color-text))
--card-title-color: title color (default var(--color-text))
--card-title-font-size: title font size (default var(--font-heading-xs-size))
--card-title-font-weight: title font weight (default var(--font-weight-semibold))

Stat CardStat card for dashboards displaying KPIs with trend deltas, an info tooltip, an icon, a progress bar, and accent border styling.Empty MessageEmpty state for telling users there's nothing to show, with error, warning, no-results, and onboarding compositions.AccordionVertically stacked panels that expand to reveal content, with one or several items open at a time and full keyboard navigation.

Card

Related components

On this page