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

With subtitle

Title

Only subtitle

Alternate color

Dark

Disabled card

Group three across

With subtitle

Title

Only subtitle

Disabled card

With subtitle

Title

Only subtitle

With Tag

Feature flag

With Tag

Feature flag

Code

Group two across

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

Group three across

components/ResourceCard/ResourceCard.js
<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 Tag

components/ResourceCard/ResourceCard.js
<Row className="resource-card-group">
<Column colMd={4} colLg={4} noGutterSm>
    <ResourceCard
       title="With Tag"
       href="https://gatsby.carbondesignsystem.com"
      >

![Adobe Acrobat icon](/images/adobe-icon.svg)

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

Props

property	propType	default	description
children	node		Reccomend 32x32 image and/or Tag 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`
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

Edit this page on GitHub

Components: PageDescription

Components: SquareCard