UNPKG

@blueprintjs/core

Version:

Core styles & components

49 lines (28 loc) 1.26 kB
@# 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. @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