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.
Basic card
Markdown
Card with custom icon
Markdown
Card with icon in left position
Markdown
Location
You can set the icon position as left
or top
.
Properties
title
The title text to display in the card
icon
Either a Font Awesome icon class (e.g. ‘brands python’) or a custom image
href
Optional URL that makes the entire card clickable
iconPosition
The position of icon relative to the text.
color
Hex color value for the icon (e.g. #FF0F00
). Ignored if lightModeColor
and darkModeColor
are both set
darkModeColor
Hex color value for the icon in dark mode (e.g. #FF0F00
)
lightModeColor
Hex color value for the icon in light mode (e.g. #FF0F00
)