BundyUI

Layout

Card

A generic surface container with color/variant/rounding options, optionally clickable.

html
<UiCard />

Tag

tag renders the card as a different element or component, for when the card is a real region of the page rather than a box — a section, an article, or a NuxtLink for a card that navigates.

Rendered as a <section>

Rounded

rounded sets the corner radius. Match it to what's inside: a card full of square media wants less than one holding text, and a card flush against a viewport edge often wants none at all.

rounded="md" (default)
rounded="lg"

Variant

variant sets the card's emphasis. solid is a filled background at the highest — reserve it for a card that should stand out from its neighbours. subtle, the default, is a light fill plus a ring; soft a tint with no ring, for gently grouping content; outline a ring over the page's own background, so the card reads as flush rather than raised.

solid — bg-elevated
subtle — bg-foreground
soft — bg-elevated/50
outline — bg-background

Each variant fills with a different surface token — solid bg-elevated, subtle bg-foreground, soft bg-elevated/50, outline bg-background. Since outline uses the page's own background, it reads as flush with the page while subtle reads as raised above it; the difference only shows against a surface other than the page itself.

Color

color themes the card in every variant. It's worth reaching for only when the card's status is the point — a warning panel, a success summary — since a coloured card competes with whatever is inside it.

solid
neutralprimarysecondarysuccesserrorwarninginfopending
subtle
neutralprimarysecondarysuccesserrorwarninginfopending
soft
neutralprimarysecondarysuccesserrorwarninginfopending
outline
neutralprimarysecondarysuccesserrorwarninginfopending

To

to makes the whole card navigable and adds a hover color shift. Without it there's no hover feedback, since the card isn't interactive.

Hover me

to makes the whole card clickable/navigable and adds a hover color shift; without it, variant/color still apply but there's no hover feedback since it's not interactive.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
tag
keyof HTMLElementTagNameMap | Component
'div'
The HTML tag or Vue component to render the Card as.
rounded
"md" | "lg"
'md'
Border radius of the Card.
variant
"solid" | "subtle" | "soft" | "outline"
'subtle'
The visual style of the Card.
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'neutral'
The color theme of the Card.
to
string
—
The URL or route to navigate to when the Card is clicked.

Slots

Slot
default

Types

ts
type Variant = "solid" | "subtle" | "soft" | "outline";
ts
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";