Gatsby Theme Carbon

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

<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

<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

<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

<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