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