Skip to main contentGatsby themeĀ Carbon

MiniCard

The <MiniCard> component can be used in place of a <ResourceCard> if your content allows it. Unless it is sitting beside your main content, it should always be wrapped inside of a <CardGroup>. This allows the correct gutter and border placement between a group of cards.

Example

GroupAside

When you have the mini resource card sitting aside the main content, be sure to add the gutterLg, properties to the <MiniCard>. This will ensure the MiniCard has the appropriate gutters at the approriate breakpoints.

Code

Group
components/MiniCard/MiniCard.js
<CardGroup>
<MiniCard title="26 characters per MiniCard" href="/demo">
![Adobe Acrobat icon](/images/adobe-icon.svg)
</MiniCard>
<MiniCard title="Use the default icon" href="/demo" />
<MiniCard
title="Choose from other icons"
href="/demo"
actionIcon="arrowRight"
Aside
components/MiniCard/MiniCard.js
<Row>
<Column colLg={8}>
When you have the mini resource card sitting aside the main content, be sure to
add the `gutterLg`, properties to the `<MiniCard>`. This will ensure the
MiniCard has the appropriate gutters at the approriate breakpoints.
</Column>
<MiniCard

Props

propertypropTyperequireddefaultdescription
childrennodeUse 32x32 image as child, will display in right-hand corner of the card
hrefstringSet url for card
titlestringTitle for the card
actionIconstringlaunchAction icon, default is launch, options are launch, arrowRight, download, disabled, email
classNamestringAdd custom class name