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