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

Title

Dark subtitle

Dark title

Subtitle

Title

Subtitle

Title

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"
Copy to clipboard

Props

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

Edit this page on GitHub

Components: Grid

Components: ImageGallery