Card list
@xui/card-listA vertical list of cards rendered as flush rows.
Install
pnpm add @xui/card-list Add the barrel to a standalone component's imports:
import { XuiCardListImports } from '@xui/card-list';
@Component({
imports: [XuiCardListImports],
// …
})Examples
Default
Loading preview…
<div xuiCardList class="w-80" [bordered]="true" [compact]="false">
<button xuiCard interactive class="text-left">Design review</button>
<button xuiCard interactive class="text-left">Backend migration</button>
<button xuiCard interactive class="text-left">Release checklist</button>
</div>Compact
Loading preview…
<div xuiCardList class="w-80" [bordered]="true" [compact]="true">
<button xuiCard interactive class="text-left">Design review</button>
<button xuiCard interactive class="text-left">Backend migration</button>
<button xuiCard interactive class="text-left">Release checklist</button>
</div>Unbordered
Loading preview…
<div xuiCardList class="w-80" [bordered]="false" [compact]="false">
<button xuiCard interactive class="text-left">Design review</button>
<button xuiCard interactive class="text-left">Backend migration</button>
<button xuiCard interactive class="text-left">Release checklist</button>
</div>API
A vertical list of cards rendered as flush rows.
Variants
borderedtruecompactfalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''borderedbooleanDraw the surrounding frame. Turn it off when nesting inside one.this.config.borderedcompactbooleanReduce the padding of every row.this.config.compact