Components

Columns

Arrange any content into responsive columns that stack on narrow screens.

<Columns> lays out its children in a responsive grid. Unlike <CardGroup>, it isn't tied to cards — put paragraphs, images, lists, or components in any column.

Install

Add the CLI once, then reuse it across projects.

Preview

Run the dev server to see changes live as you type.

<Columns cols={2}>
  <div>
    **Install**

    Add the CLI once, then reuse it across projects.
  </div>
  <div>
    **Preview**

    Run the dev server to see changes live as you type.
  </div>
</Columns>

Three columns

Increase cols to fit more items per row. Columns stack vertically once an item would fall below the minimum width, so three columns become one on a phone.

Note

Safe-to-skip aside.

Tip

A helpful recommendation.

Warning

Proceed carefully.

<Columns cols={3}>
  <Card title="Note" icon="pencil">Safe-to-skip aside.</Card>
  <Card title="Tip" icon="lightbulb">A helpful recommendation.</Card>
  <Card title="Warning" icon="triangle-alert">Proceed carefully.</Card>
</Columns>

Properties

colsnumberdefault: 2

The maximum number of columns per row.

spacestring

The gap between columns, as a CSS length.

minstring

The minimum width an item may shrink to before the grid wraps to fewer columns.

Was this page helpful?

Cards

Accordions