ImageCard
The <ImageCard>
component should generally be used inside of a
<Row className="image-card-group">
and <Column>
component. This allows us to
properly space the <Column>
components when they wrap on mobile.
Example
Code
<Row className="image-card-group"><Column colMd={4} colLg={4} noGutterSm><ImageCard title="Title" subTitle="Subtitle" href="/">![Square](/images/square.jpg)</ImageCard><ImageCardtitle="Dark title"
Props
| property | propType | required | default | description |
| ------------- | -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| children | node | | | Background image for the card, make sure it is saved out at the correct aspect ratio or it will appear distorted |
| href | string | | | Set url for card |
| aspectRatio | string | | 1:1
| Set card aspect ratio, default is 1:1
, options are 1:1
, 16:9
, 4:3
, 2:1
, 1:2
|
| subTitle | string | | | Smaller title on top left of card |
| title | string | | | Large title |
| actionIcon | string | | | Action icon, default is no icon, options are Launch
, ArrowRight
, Download
, Disabled
, Email
|
| titleColor | string | | light
| Set title text color, default is light
, options are light
or dark
|
| subTitleColor | string | | light
| Set sub title text color, default is light
, options are light
or dark
|
| iconColor | string | | light
| Set icon color, default is light
, options are light
or dark
|
| hoverColor | string | | light
| Set hover to lighten or darken the image, default is light
, options are light
or dark
|
| disabled | bool | | false
| Set for disabled card |
| className | string | | | Add custom class name |