Columns

Arrange multiple cards neatly in a side-by-side grid layout.

The Columns component helps you organize several Card elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.

Columns Usage

You can use the Columns component to create a grid of cards with a specified number of columns.

<Columns cols={2}>
  <Card title="Getting Started" icon="rocket">
    Kick off your project using our easy quickstart guide.
  </Card>

  <Card title="API Reference" icon="code">
    Browse all endpoints, parameters, and code examples for your API integration.
  </Card>
</Columns>

Getting Started

Kick off your project using our easy quickstart guide.

API Reference

Browse all endpoints, parameters, and code examples for your API integration.

Properties

colsnumberrequired

The number of columns in the grid.

childrennoderequired

The content of the columns.