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

With subtitle

Title

Only subtitle

Alternate color

Dark

Disabled card

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>
Copy to clipboard

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)
Copy to clipboard

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)

Copy to clipboard

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

Copy to clipboard

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>