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"
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
Copy to clipboard

Props

| property | propType | required | 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

Edit this page on GitHub

Components: MediumPosts

Components: PageDescription