Home
Cards
Learn how to use the Card component in your documentation to organize and link content.
Card body.
Overview
Cards can be added individually or as a group to highlight, organize, and link content. Cards include a Phosphor icon, title, body, and link. If cards are added as a group, they will be displayed in a two-column layout on larger screens. Otherwise, they will span the full width of the article body. Cards are typically used to link to other pages, but they can also be used without a link to simply highlight information.
Properties
Card
| Name | Type | Description |
|---|---|---|
href | string | Relative link to another page. |
icon | string | Name of a Phosphor icon. Must be in React (PascalCase) format. |
title required | string | Title of the card that will appear in bold. |
CardGrid
The CardGrid component does not have any applicable properties.
Examples
Individual card with link
This is the card body.
Individual card without a link
This is a card without a link defined. It does not have a hover effect.
Group of cards
CardGrid is used to group multiple cards. Cards grouped within CardGrid are
presented in a two-column grid on larger screens and as a one-column grid on
smaller screens.
This is the first card.
This is the second card.
This is the third card.
This is the fourth card.