CardStatus provides a standard way of displaying a Card's current status.
Examples #
Import Syntax #
import Card, { CardStatus } 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 #
CardStatus conveys the current status of Card. It is available in a few variants.
Card Title
Card Title
Card Title
<DemoLayout> <Card> <CardTitle>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> <CardStatus variant="danger">Unavailable</CardStatus> </Card> <Card> <CardTitle>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> <CardStatus variant="success">Available</CardStatus> </Card> <Card> <CardTitle>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> <CardStatus variant="warning">Warning</CardStatus> </Card> </DemoLayout>
Bidirectionality #
CardStatus reverses its alignment when the direction theme
variable is set to rtl (right-to-left).
<DemoLayout dir="rtl"> <ThemeProvider theme={{ direction: 'rtl' }}> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardStatus variant="danger">غير متوفره</CardStatus> </Card> </ThemeProvider> </DemoLayout>
API & Theme #
CardStatus 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 |
|---|---|
| CardStatus_fontSize | theme.fontSize_ui |
| CardStatus_fontWeight | theme.fontWeight_regular |
| CardStatusIcon_margin | theme.space_inline_sm |
| CardStatusIcon_size | 0.75em |
Usage #
When/How to Use #
CardStatus is used to display a Card's current status. If the
status information is not likely to change, use
CardTitle's secondaryText or subtitle prop,
instead.
Best Practices #
Use the appropriate variant for your intent.
Card Title
Don't use a variant that differs from intent, as this will cause confusion.