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

Title

Square
Dark subtitle

Dark title

Light dark
Subtitle

Title

Plane image
color pallete array
Subtitle

Title

IBM Cloud Server

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 |

Edit this page on GitHub
Previous
Components: Grid
Next
Components: ImageGallery