ImageCard

The <ImageCard> component should generally be used inside of a <Row> and <Column> component.

Example

Code

<Row className="image-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ImageCard title="Title" subTitle="Subtitle" href="/">
![Square](/images/square.png)
</ImageCard>
<ImageCard
title="Dark title"
titleColor="dark"
aspectRatio="1:1"
href="/"
actionIcon="arrowRight"
subTitleColor="light"
subTitle="Light subtitle"
>
![Light dark](./images/light-dark.jpg)
</ImageCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ImageCard
title="Title"
subTitle="Subtitle"
aspectRatio="1:2"
href="/"
actionIcon="download"
titleColor="light"
subTitleColor="light"
>
![Plane image](./images/plane.jpg)
</ImageCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ImageCard aspectRatio="1:1" href="/" hoverColor="dark">
![color pallete array](/images/color-grid.svg)
</ImageCard>
<ImageCard disabled aspectRatio="1:1" href="/">
![Square](/images/square.png)
</ImageCard>
</Column>
</Row>

Props

propertypropTyperequireddefaultdescription
childrennodeBackground image for the card, make sure it is saved out at the correct aspect ratio or it will appear distorted
hrefstringSet url for card
aspectRatiostring1:1Set card aspect ratio, default is 1:1, options are 1:1, 16:9, 4:3, 2:1, 1:2
subTitlestringSmaller title in bottom left of card
titlestringLarge title
actionIconstringAction icon, default is no icon, options are Launch, ArrowRight, Download, Disabled, Email
titleColorstringlightSet title text color, default is light, options are light or dark
subTitleColorstringlightSet sub title text color, default is light, options are light or dark
iconColorstringlightSet icon color, default is light, options are light or dark
hoverColorstringlightSet hover to lighten or darken the image, default is light, options are light or dark
disabledboolfalseSet for disabled card
classNamestringAdd custom class name