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

<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

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