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
Group AsideWhen 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
GroupAside<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" /><MiniCardtitle="Choose from other icons"href="/demo"actionIcon="arrowRight"
<Row><Column colLg={8}>When you have the mini resource card sitting aside the main content, be sure toadd the `gutterLg`, properties to the `<MiniCard>`. This will ensure theMiniCard has the appropriate gutters at the approriate breakpoints.</Column><MiniCard
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
|
| className | string | | | Add custom class name |