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