Skip to main contentGatsby themeĀ Carbon

ResourceCard

The <ResourceCard> component should be wrapped with a <Column> inside of <Row className="resource-card-group">. This allows the correct border placement between a group of cards.

Example

Code

Group
components/ResourceCard/ResourceCard.js
<Row className="resource-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Carbon Design System"
href="https://www.carbondesignsystem.com">
![Github icon](/images/github-icon.png)
</ResourceCard>
With title
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="With subtitle"
title="Title"
aspectRatio="2:1"
actionIcon="arrowRight"
href="https://gatsby-theme-carbon.now.sh">
![Github icon](/images/github-icon.png)
Only subtitle
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Only subtitle"
actionIcon="download"
aspectRatio="2:1"
href="https://gatsby-theme-carbon.now.sh">
![Github icon](/images/github-icon.png)
Dark
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Alternate color"
title="Dark"
aspectRatio="2:1"
color="dark"
actionIcon="email"
href="https://gatsby-theme-carbon.now.sh">
Disabled
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
title="Disabled card"
aspectRatio="2:1"
disabled
href="https://gatsby-theme-carbon.now.sh"
/>
</Column>

Props

propertypropTyperequireddefaultdescription
childrennodeUse 32x32 image as child, will display in bottom left of card
hrefstringSet url for card
subTitlestringSmaller title
titlestringLarge title
actionIconstringlaunchAction icon, default is launch, options are launch, arrowRight, download, disabled, email, calendar
aspectRatiostring2:1Set card aspect ratio, default is 2:1, options are 1:1, 16:9, 4:3
colorstringlightSet to dark for dark background
disabledboolfalseSet for disabled card
classNamestringAdd custom class name