> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-han-update-changelogs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 on the same column.

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

<RequestExample>
  ```jsx 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>
  ```
</RequestExample>

## Props

<ResponseField name="cols" default={2}>
  The number of columns per row
</ResponseField>