Card

Cards help group visual elements on a page, or act as interactive tiles.

Screenshot of component Card basic

Usage

The card acts as a wrapper around child renderables, and will expand to fit the width of its container.

Use any component(s) as children.

import { Card } from '@blueprintjs/core'
 
<Card>
<h3>The title</h3>
<p>Content goes here</p>
</Card>

Drop Shadow

Draw attention to the card by 'elevating' it from the page. Control the drop shadow by configuring the elevation property with an input integer between 0 and 4.

Elevation of 0 (default) does not apply drop-shadow.

Screenshot of component Card with-elevation-0
Screenshot of component Card with-elevation-1
Screenshot of component Card with-elevation-2
Screenshot of component Card with-elevation-3
Screenshot of component Card with-elevation-4
<Card elevation={2}>
<h3>The title</h3>
<p>Content goes here</p>
</Card>

Interactive

Card's can increase elevation when interacted with (mouse-over).

While hovering over an interactive card, the user's cursor will change icon to suit a clickable context.

<Card interactive elevation={3}>
<Composition templateCols="1fr 1fr">
<Box> A </Box>
<Box> B </Box>
</Composition>
</Card>