@blueprintjs/core
Version:
Core styles & components
49 lines (28 loc) • 1.26 kB
Markdown
# 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.
## Import
```tsx
import { CardList } from "@blueprintjs/core";
```
## Usage
Use **CardList** to group multiple cards together in a vertical list.
## Bordered
To remove borders, set `bordered={false}`. This creates a seamless appearance
when nesting **CardList** within other components.
## Compact
Enable the `compact` prop to reduce the padding inside each card in the list.
## 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.
## Interactive Playground
## Props interface