Cards
Display important content in a card, with an optional link.
Use the <Card /> component to display data within a card. You can also use the CardGroup component to display multiple cards in a row.
Example
Installation
Install this package using npm or yarn.
npm install @myorg/my-package
<Card title="Installation" icon="cog">
Install this package using npm or yarn.
```bash
npm install @myorg/my-package
```
</Card>
Optionally, add a href prop to the Card component to make the card clickable.
Learn more
Click here to learn more about this package.
<Card title="Learn more" icon="school" href="/">
Click here to learn more about this package.
</Card>
Props
titlestringoptionalThe title of the card.
hrefstringoptionalWhether this card should be clickable, and where it should link to.
iconstringoptionalThe icon to display next to the card title.
Card Groups
To group cards into columns, use the <CardGroup /> component.
Installation
Install this package using npm or yarn.
Documentation
Read the documentation.
<CardGroup>
<Card title="Installation" icon="cog">
Install this package using npm or yarn.
```bash
npm install @myorg/my-package
```
</Card>
<Card title="Learn more" icon="school" href="/">
Click here to learn more about this package.
</Card>
</CardGroup>