Card
@xui/cardA bounded, elevated container for a single piece of content.
Install
pnpm add @xui/card Add the barrel to a standalone component's imports:
import { XuiCardImports } from '@xui/card';
@Component({
imports: [XuiCardImports],
// …
})Examples
Default
Loading preview…
<div xuiCard class="w-72" [elevation]="0" [interactive]="false" [selected]="false" [compact]="false">
<h3 xuiHeading [level]="4">Quarterly report</h3>
<p xuiText color="muted" size="sm">Updated 2 hours ago</p>
</div>Interactive
Loading preview…
<div class="flex gap-4">
<button
xuiCard
interactive
[selected]="plan() === 'weekly'"
(click)="plan.set('weekly')"
class="w-48 text-left"
>
<h3 xuiHeading [level]="5">Weekly</h3>
<p xuiText color="muted" size="sm">A digest every Monday</p>
</button>
<button
xuiCard
interactive
[selected]="plan() === 'daily'"
(click)="plan.set('daily')"
class="w-48 text-left"
>
<h3 xuiHeading [level]="5">Daily</h3>
<p xuiText color="muted" size="sm">One email each morning</p>
</button>
</div>Compact
Loading preview…
<div xuiCard class="w-72" [elevation]="0" [interactive]="false" [selected]="false" [compact]="true">
<h3 xuiHeading [level]="4">Quarterly report</h3>
<p xuiText color="muted" size="sm">Updated 2 hours ago</p>
</div>API
A bounded, elevated container for a single piece of content.
Variants
elevation0interactivefalseselectedfalsecompactfalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''elevationXuiCardElevationDrop-shadow depth, from flat (0) to floating (4). An interactive card lifts one step on hover.this.config.elevationinteractivebooleanRespond to hover and focus. Pair it with a <button> or <a> host.falseselectedbooleanDraw the selected ring.falsecompactbooleanReduce the internal padding.this.config.compact