MiniCard

The <MiniCard> component can be used in place of a <ResourceCard> if your content allows it. Unless it is sitting aside your main conent, 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

components/MiniCard/MiniCard.js
<CardGroup>
  <MiniCard title="26 characters per MiniCard" href="/demo">
    ![Github icon](/images/github-icon.png)
  </MiniCard>
  <MiniCard title="Use the default icon" href="/demo" />
  <MiniCard
    title="Choose from other icons"
    href="/demo"

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
  gutterLg
  title="By itself, as an Aside"

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