Cards
Cards are container components that group related content and actions together. They provide a flexible way to present information with optional elements like icons, titles, and links in a visually distinct box.
You can use individual cards or use the CardGroup component to arrange multiple cards in a responsive grid layout.
Basic card
Markdown
Card with custom icon
Markdown
Card with icon in left position
Markdown
You can set the icon position as left or top.
Adding images to cards
Cards support displaying images alongside content. The image automatically resizes to fit the card dimensions, so you typically don’t need to specify imageWidth or imageHeight unless you want to override the default behavior.
Card with image
Markdown
Display an image alongside your card content. The image automatically scales to fit the card.
Card with image on top
Markdown
Position the image at the top of the card for a banner-style layout.
Properties
The title text to display in the card
Either a Font Awesome icon class (e.g. ‘brands python’) or a custom image
Optional URL that makes the entire card clickable
The position of icon relative to the text.
Hex color value for the icon (e.g. #FF0F00). Ignored if lightModeColor and darkModeColor are both set
Hex color value for the icon in dark mode (e.g. #FF0F00)
Hex color value for the icon in light mode (e.g. #FF0F00)
URL of the image to display in the card. When set, the card displays the image alongside the content.
Position of the image relative to the card content. Use imagePosition to control the layout.
Width of the image (e.g. 200px, 50%). Only use if you need to override the default sizing. The image automatically resizes to fit the card by default.
Height of the image (e.g. 150px, 100%). Only use if you need to override the default sizing. The image automatically resizes to fit the card by default.
