<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>

The CardGroup component lets you group multiple Card components together. It’s most often used to put multiple cards on the same column.

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

<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

Was this page helpful?