Gatsby Theme Carbon - ResourceCard

The <ResourceCard> component should generally be used inside of a <Row> and test <Column> with a className="resource-card-group" placed on the container row. This allows the correct border placement between a group of cards.

Example

With subtitle

Title

Only subtitle

Alternate color

Dark

Disabled card

Code

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

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

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"
  >
    ![Sketch icon](/images/sketch-icon.png)
  </ResourceCard>
</Column>

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`
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: ArticleCard