Card Groups

Show cards side by side in a grid format

The CardGroup component lets you group multiple Card components together. It’s most often used to put multiple cards in a grid, by specifying the number of grid columns.

First Card

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

Second Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Third Card

Ut enim ad minim veniam, quis nostrud exercitation ullamco

Fourth Card

Excepteur sint occaecat cupidatat non proident

Card Group Example

<CardGroup cols={2}>
  <Card title="First Card" icon="square-1">
    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
  </Card>
  <Card title="Second Card" icon="square-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </Card>
  <Card title="Third Card" icon="square-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
  </Card>
  <Card title="Fourth Card" icon="square-4">
    Excepteur sint occaecat cupidatat non proident
  </Card>
</CardGroup>

Props

cols · default: 2

The number of columns per row