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.
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 " >
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 " >
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 " >
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 >
property propType required default description children node Use 32x32 image as child, will display in bottom left of card href string Set url for card subTitle string Smaller title title string Large title actionIcon string launchAction icon, default is launch, options are launch, arrowRight, download, disabled, email, calendar,none aspectRatio string 2:1 Set card aspect ratio, default is 2:1, options are 1:1, 16:9, 4:3 color string light Set to dark for dark background disabled bool false Set for disabled card className string Add custom class name
