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 " >

</ 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 " >

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 >