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.

Although the mini-resource card has a similar geometry to the button component, they should not be used in place of a button. Buttons encourage action from the user and affect the website’s front-end or back-end. The resource cards, both large and mini are essentially links. They are used for navigation and actions that do not affect the website.

Example

Group Aside

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
<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
<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
actionIconstring
launch
Action icon, default is launch, options are
launch
,
arrowRight
,
download
,
disabled
,
email
classNamestringAdd custom class name