mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ricardo Nunez
40d2e2cd2d
* Add proper language support for syntax highlighting to all code blocks * Camel case inline code
39 lines
985 B
Plaintext
39 lines
985 B
Plaintext
---
|
|
title: 'Columns'
|
|
description: 'Show cards side by side in a grid format'
|
|
icon: 'columns-2'
|
|
keywords: ['card groups']
|
|
---
|
|
|
|
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.
|
|
|
|
<Columns cols={2}>
|
|
<Card title="First Card" icon="panel-left-close">
|
|
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
|
|
</Card>
|
|
<Card title="Second Card" icon="panel-right-close">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
</Card>
|
|
</Columns>
|
|
|
|
<RequestExample>
|
|
|
|
```mdx 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>
|
|
```
|
|
|
|
</RequestExample>
|
|
|
|
### Props
|
|
|
|
<ResponseField name="cols" default={2}>
|
|
The number of columns per row
|
|
</ResponseField>
|