---
title: Card List
---

# Card List

**CardList** is a lightweight wrapper around the [**Card**](#core/components/card) component.
It groups cards visually into a list without adding extra visual weight or spacing between them.
Long lists can be styled with CSS for vertical scrolling.

## Usage

```ts copy
import { CardList } from "@blueprintjs/core";
```

```tsx
<CardList>
    <Card>Option 1</Card>
    <Card>Option 2</Card>
</CardList>
```

## Examples

### Basic

Use **CardList** to group multiple cards together in a vertical list.

@reactCodeExample CardListBasicExample

### Bordered

To remove borders, set `bordered={false}`. This creates a seamless appearance
when nesting **CardList** within other components.

@reactCodeExample CardListBorderedExample

### Compact

Enable the `compact` prop to reduce the padding inside each card in the list.

@reactCodeExample CardListCompactExample

### Combining with section

The **CardList** component can be embedded in a [**Section**](#core/components/section)
component to add a title or description above the list.

Set the same value for `<SectionCard padded>` and `<CardList bordered>`
(either `true` or `false` for both) to get two different kinds of appearances.

@reactCodeExample CardListSectionExample

## Interactive Playground

@reactExample CardListPlaygroundExample

## Props interface

@interface CardListProps