Columns

Show cards side by side in a grid format

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

Card Group Example

<Columns cols={2}>
  <Card title="First Card">
    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
  </Card>
  <Card title="Second Card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </Card>
</Columns>

Props

cols · default: 2

The number of columns per row