Skip to main contentGatsby theme Carbon

FeatureCard

The <FeatureCard> component takes the same props as the <ResourceCard> component (except for aspectRatio, this is fixed at 1:2 for the card), this component should not be used within <Row> or <Column> components as the grid is built in to the component already.

Example

Code

components/FeatureCard/FeatureCard.js
<FeatureCard
subTitle="With subtitle"
title="Title"
actionIcon="arrowRight"
href="/"
disabled
color="dark">
![demo image](/images/large-image.jpg)

Props

propertypropTyperequireddefaultdescription
childrennodeUse large image as child, will display above the card
hrefstringSet url for card
subTitlestringSmaller title
titlestringLarge title
actionIconstringlaunchAction icon, default is launch, options are Launch, ArrowRight, Download, Disabled, Email
colorstringlightSet to dark for dark background
disabledboolfalseSet for disabled card
classNamestringAdd custom class name