The

<ResourceCard>

component should be wrapped with a

<Column>

inside of

<Row className="resource-card-group">

<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

Disabled card

Group three across

Disabled card

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

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

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

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)

Copy to clipboard

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

Copy to clipboard

Disabled

<Column colMd={4} colLg={4} noGutterSm>
  <ResourceCard
    title="Disabled card"
    aspectRatio="2:1"
    disabled
    href="https://gatsby.carbondesignsystem.com"
  />
</Column>
Copy to clipboard

Props

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

launch

| Action icon, default is launch, options are

launch

arrowRight

download

disabled

email

calendar

none

dark

Edit this page on GitHub

Components: PageDescription

Components: SquareCard