info icon

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

26 characters per MiniCard

Use the default icon

Choose from other icons

Or bring your own

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.

By itself, as an Aside

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"
  />
  <MiniCard title="Or bring your own" href="/demo">
    ![Github icon](/images/sketch-icon.png)
  </MiniCard>
</CardGroup>
Copy to clipboard

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
  gutterLg
  title="By itself, as an Aside"
  href="https://gatsby.carbondesignsystem.com"
  >

![Sketch icon](/images/sketch-icon.png)

</MiniCard>
</Row>
Copy to clipboard

Props

property	propType	default	description
children	node		Use 32x32 image as child, will display in right-hand corner of the card
href	string		Set url for card
title	string		Title for the card
actionIcon	string	launch	Action icon, default is launch, options are launch , arrowRight , download , disabled , email
className	string		Add custom class name

Edit this page on GitHub

Components: MediumPosts

Components: PageDescription