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

<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"
      titleColor="dark"
      aspectRatio="1:1"
      href="/"
      actionIcon="arrowRight"
      subTitleColor="dark"
      subTitle="Dark 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.jpg)

    </ImageCard>

  </Column>
</Row>
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