Card Group

A component used to create card groups that can be used to display multiple cards in a compact and organized way.

Preview

Heading 1

This is an example of card content with columns.

Heading 2

This is an example of card content with columns.

Grid Card

This is a horizontal card layout.

Horizontal Card

This is a horizontal card layout.

Props

PropTypeDefaultDescription
colsnumber{2}By default 2 The number of columns per row

Output Markdown

markdown
<Cards cols={2}>
  <Card title="Heading 1" icon="Heading1">
    This is an example of card content with columns.
  </Card>
  <Card title="Heading 2" icon="Heading2">
    This is an example of card content with columns.
  </Card>
  <Card title="Grid Card" icon="Grid" horizontal>
      This is a horizontal card layout.
  </Card>
  <Card title="Horizontal Card" icon="Layout" horizontal>
      This is a horizontal card layout.
  </Card>
</Cards>
Edit this page

Last updated Jun 15, 2026