ResourceCard

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

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://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
  >
    ![Github icon](/images/github-icon.png)

Only subtitle

components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
  <ResourceCard
    subTitle="Only subtitle"
    actionIcon="download"
    aspectRatio="2:1"
    href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
  >
    ![Github icon](/images/github-icon.png)
  </ResourceCard>

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://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
  >

Disabled

components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
  <ResourceCard
    title="Disabled card"
    aspectRatio="2:1"
    disabled
    href="https://github.com/IBM/carbon-elements/blob/master/.github/CONTRIBUTING.md"
  />
</Column>

Props

property	propType	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`
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: Tabs