@blueprintjs/core/src/components/card/card.mdx

Core styles & components

---
title: Card
---

# Card

A **Card** is a bounded container for grouping related content with a solid
background color. It offers customizable padding, interactivity, and elevation.

## Usage

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

```tsx
<Card>This is a simple card with some text</Card>
```

## Examples

### Basic

A **Card** provides a structured container for text, actions, or other content.
Use it to present a cohesive unit of information.

@reactCodeExample CardBasicExample

### Interactive

The `interactive` prop makes a **Card** appear responsive to hover and click events.
Combine it with an `onClick` handler to perform actions when the card is clicked,
such as navigation or selection.

Additionally, the `selected` prop can be used to indicate a selection state.

@reactCodeExample CardInteractiveExample

### Compact

Enable the `compact` prop to reduce the padding of the **Card**, resulting in a more condensed appearance.

@reactCodeExample CardCompactExample

### Elevation

The `elevation` prop controls the shadow depth of the **Card**, creating a visual
hierarchy. Five elevations are supported, from 0 to 4. Higher elevation values
make the **Card** appear more prominent.

> Note that the `Classes.ELEVATION_*` classes can be used on any element (not just a `Card`) to apply the box shadow.

@reactCodeExample CardElevationExample

## Interactive Playground

@reactExample CardPlaygroundExample

## Props interface

@interface CardProps