Card
A common container component.
General
The basic Card usage.
Hoverable
You can apply a fancy hover animation with the hoverable prop.
Bordered
You can apply a fancy hover animation with the bordered prop.
Shadow
You can apply shadow with the shadow prop.
Types
Show different states with colors.
default
default
primary
primary
secondary
secondary
success
success
warning
warning
error
error
info
info
dark
dark
lite
lite
With Footer
You can use the Card.Footer component to add actions, details or another information to the Card.
Bolio UI
More creative and fun with amazing features for React.
Bolio UI
More creative and fun with amazing features for React.
With Image
You can use the Image component to add an image to the Card.
Bolio UI
More creative and fun with amazing features for React.With Divider
Show different types of content using Divider.
React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.
APIs
Card.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| hoverable | add effect on hover | boolean | - | false |
| shadow | show shadow | boolean | - | false |
| type | card type | CardType | - | default |
| ... | native props | HTMLAttributes | 'id', className', ... | - |
Card.Content.Props[alias: Card.Body]
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| ... | native props | HTMLAttributes | 'id', className', ... | - |
Card.Footer.Props[alias: Card.Actions]
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| disableAutoMargin | cancel automatic margin value | boolean | - | false |
| ... | native props | HTMLAttributes | 'id', className', ... | - |
CardType
type CardType =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
| 'dark'
| 'lite'
Previous
Capacity
Next
Checkbox
