Overview
When to use
The card is used to display information in a compact and structured manner.
When to consider an alternative
If the displayed content should be emotional and if it's too long. Don't use the card with more than 380px width. The card doesn't work in an parent with the modifier --is-block or .util-block
Image sizes
| Parent Element | brp-0 | brp-1 | brp-2 | brp-3 | brp-4 |
|---|
| Card Image | 16:9 | 16:9 | 16:9 | 16:9 | 16:9 |
| Max. Height | 164px | 254px | 190px | 164px | 200px |
Component
Default
Properties
Card
| Property | Type | Required | Default |
|---|
| children | Node | false | - |
| utilClassNames | String | false | - |
| Property | Type | Required | Default |
|---|
| children | Node | false | - |
| utilClassNames | String | false | - |
Card.Image
| Property | Type | Required | Default |
|---|
| src | String | true | - |
| alt | String | true | - |
| utilClassNames | String | false | - |
Card.Body
| Property | Type | Required | Default |
|---|
| children | Node | false | - |
| utilClassNames | String | false | - |
| Property | Type | Required | Default |
|---|
| children | Node | false | - |
| utilClassNames | String | false | - |