CardDividers separate content in Card to establish hierarchy.
Too many dividers will add unnecessary weight to your Card.
Examples #
Import Syntax #
import Card, { CardDivider } 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 #
Use CardDivider to separate sections of your Card.
Card Title
<DemoLayout> <Card> <CardTitle>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> <CardDivider /> <CardBlock>{loremIpsum}</CardBlock> <CardDivider /> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout>
API & Theme #
CardDivider Props #
The CardDivider component takes the following React props.
Note
CardDivider does not have properties of its own. Undocumented properties will be applied to the root element.CardDivider 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 |
|---|---|
| CardDivider_borderColor | theme.borderColor |
| CardDivider_borderWidth | 1px |
Usage #
Best Practices #
Don't use CardDivider to separate CardTitle from other content.
Card Title
Don't use CardDivider between every section of Card content, which makes the Card unnecessarily busy. Dividers are best used when the Card contains complex content that would be hard to discern without the visual separation.
Card Title
