Skip to main contentGatsby theme Carbon

ResourceCard

The

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

Example

Group two across

Group three across

Code

Group two across
<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>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Carbon Design System"
href="https://www.carbondesignsystem.com">
![Github icon](/images/github-icon.png)
</ResourceCard>
</Column>
</Row>
Group three across
<Row className="resource-card-group-3-across">
<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)
</ResourceCard>
</Column>
<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)
</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Only subtitle"
aspectRatio="2:1"
actionIcon="email"
href="https://gatsby.carbondesignsystem.com"
>
![Sketch icon](/images/sketch-icon.png)
</ResourceCard>
</Column>
</Row>
With title
<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)
</ResourceCard>
</Column>
Only subtitle
<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)
</ResourceCard>
</Column>
Dark
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Alternate color"
title="Dark"
aspectRatio="2:1"
color="dark"
actionIcon="email"
href="https://gatsby.carbondesignsystem.com">
![Sketch icon](/images/sketch-icon.png)
</ResourceCard>
</Column>
Disabled
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
title="Disabled card"
aspectRatio="2:1"
disabled
href="https://gatsby.carbondesignsystem.com"
/>
</Column>

Props

propertypropTyperequireddefaultdescription
childrennodeUse 32x32 image as child, will display in bottom left of card
hrefstringSet url for card
subTitlestringSmaller title
titlestringLarge title
actionIconstring
launch
Action icon, default is launch, options are
launch
,
arrowRight
,
download
,
disabled
,
email
,
calendar
,
none
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