Cards group conceptually related content. Cards represent a gateway to more detailed information in another app view. Use Cards to provide detail about a feature in your app, or to represent data with which your users can interact.
Examples #
Import Syntax #
import Card, { CardActions, CardBlock, CardDivider, CardFooter, CardImage, CardTitle } from 'mineral-ui/Card';Note
Cards normally occupy the full available width of their container. The Cards here are width-constrained for illustration purposes.
Basic Usage #
Card content should be neither too simple nor too complex. Cards are used as a gateway to more detailed content, not merely as a widget container. Cards can contain any children, but are best used with CardActions, CardBlock, CardDivider, CardFooter, CardImage, and CardTitle.
Card Title
<DemoLayout> <Card> <CardTitle>Card Title</CardTitle> <CardImage src="/images/500x500.png" alt="gradient placeholder" /> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout>
Clickable #
If an onClick callback is provided, the entire Card becomes clickable and keyboard actionable.
Use this feature when only one action can be taken per Card.
This simplifies the interface by not requiring an extra Button.
Card Title
<DemoLayout> <Card onClick={event => console.log(event)}> <CardTitle>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout>
Arbitrary Children #
A Card will render any children.
For best results, please ensure content matches the top/bottom margin and left/right padding of the other <Card*/> components, or use CardBlock.
Card Title
<DemoLayout> <Card> <CardTitle>Card Title</CardTitle> {customContent} </Card> </DemoLayout>
Order of Sections #
There is no "one true way" to lay out children in Card; it is flexible enough to accept different component arrangements. The one exception is CardFooter, which must be last in Card.
Card Title
Card Footer
Card Title
Card Footer
Card Title
Card Footer
<DemoLayout> <Card> <CardTitle>Card Title</CardTitle> <CardImage src="/images/500x500.png" alt="gradient image" /> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Button minimal>Button 1</Button> <Button primary>Button 2</Button> </CardActions> <CardFooter title="Card Footer" /> </Card> <Card> <CardImage src="/images/500x500.png" alt="gradient image" /> <CardTitle>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Button minimal>Button 1</Button> <Button primary>Button 2</Button> </CardActions> <CardFooter title="Card Footer" /> </Card> <Card> <CardTitle>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> <CardImage src="/images/500x500.png" alt="gradient image" /> <CardActions> <Button minimal>Button 1</Button> <Button primary>Button 2</Button> </CardActions> <CardFooter title="Card Footer" /> </Card> </DemoLayout>
API & Theme #
Card Theme Variables #
These variables can be used as hooks to override this component's
style at either a
local
or global
level. The theme referenced below is whatever theme is available
from props to the instance of this component.
| Variable | Value |
|---|---|
| Card_backgroundColor | theme.panel_backgroundColor |
| Card_borderColor | theme.panel_borderColor |
| Card_borderRadius | theme.borderRadius_1 |
| Card_boxShadow | theme.boxShadow_2 |
| Card_boxShadow_focus | 0 0 0 2px borderColor_theme_focus, boxShadow_1 |
| CardRow_marginVertical | theme.space_stack_md |
| CardRow_marginVerticalLast | theme.space_stack_lg |
| CardRow_paddingHorizontal | theme.space_inset_md |
Usage #
When/How to Use #
Cards are used when you need to group different kinds of elements with actions attached. Cards are used to contain content of variable length that might not fit neatly into a table row or grid cell. They're often used to show a collection of related but different types of information.
Don't put too much information in a single card. Cards represent a gateway to more detailed information in another app view.
Best Practices #
Use a Card when you have different kinds of related content representing one data object.
Card Title
Use the CardTitle component to add titles to your Cards. Your Card titles and subtitles should use "Title Case".
Card Title
Card Subtitle
Don't use custom heading elements. Regular <h1>,
<h2>, etc. will not be formatted automatically. Use a
CardTitle instead.
Heading Element
Don't forget to use a CardBlock. Content placed into a Card outside the CardBlock will not have formatting or spacing applied.
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Don't use regular <img /> tags directly inside a Card,
which will result in unformatted content. Use CardImage
instead.
Card Title
Don't use Cards when list items would do. Using a list for single pieces of information is a more efficent design.