Card Lists

Display cards side by side in a grid layout. The <CardList> component allows you to organize multiple <Card> components together, commonly used to align multiple cards within the same column.

You can add a cols property to the CardList component to define the number of columns on the card grid. You can add up to 5 columns.

You can mix both <Cards> and <APICards> inside a <CardList> component.

Duotone Card

This card shows a book icon with duotone weight.

Thin Card

This card shows an airplane icon with thin weight.

Regular Card

This card shows an alarm icon with regular weight.

Filled Card

This card shows a club icon with filled weight.

Code for Card Groups

<CardList cols={4}>
  <Card 
    title="Duotone Card"
    icon="Book"
    description="This card shows a book icon with duotone weight."
    iconType='duotone'
  />

  <Card 
    title="Thin Card" 
    icon="airplane"
    description="This card shows an airplane icon with thin weight."
    iconType='thin'
  />

  <Card 
    title="Regular Card" 
    icon="alarm"
    description="This card shows an alarm icon with regular weight."
    iconType='regular'
  />

  <Card 
    title="Filled Card" 
    icon="club"
    description="This card shows a club icon with filled weight."
    iconType='fill'
  />
</CardList>