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.carbondesignsystem.com">
![Adobe Acrobat icon](/images/adobe-icon.svg)
Only subtitle
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Only subtitle"
actionIcon="download"
aspectRatio="2:1"
href="https://gatsby.carbondesignsystem.com">
![Mural icon](/images/mural-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.carbondesignsystem.com">
Disabled
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
title="Disabled card"
aspectRatio="2:1"
disabled
href="https://gatsby.carbondesignsystem.com"
/>
</Column>