Cards
Highlight main points or links with customizable icons
Card Title
This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page.
Horizontal card
Add a horizontal property to display cards horizontally.
Horizontal Card
Here is an example of a horizontal card
Image card
Add an img property to display an image on the top of the card.
Image Card
Here is an example of a card with an image
Link card
You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links.
Link card
This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page.
Grouping cards
You can group cards in columns.
First Card
This is the first card.
Second Card
This is the second card.
Props
The title of the card
A Font Awesome icon, Lucide
icon, or JSX compatible SVG code in icon={}.
To generate JSX compatible SVG code:
- Use the SVGR converter.
- Copy the code inside the
<svg/>tag. - Paste the code into your card. Make sure to only copy and paste the code inside the
<svg/>tag. - You may need to decrease the height and width to make the image fit.
One of regular, solid, light, thin, sharp-solid, duotone, brands
The color of the icon as a hex code
The url that clicking on the card would navigate the user to
Makes the card more compact and horizontal
The url or local path to an image to display on the top of the card
Label for the action button
Enable or disable the link arrow icon