Skip to main contentGatsby themeĀ Carbon

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

components/ImageCard/ImageCard.js
<Row className="image-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ImageCard title="Title" subTitle="Subtitle" href="/">
![Square](/images/square.jpg)
</ImageCard>
<ImageCard
title="Dark title"

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 on top 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