Writing contentComponents

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.

Location

You can set the icon position as left or top.

Properties

title
string

The title text to display in the card

icon
string | img

Either a Font Awesome icon class (e.g. ‘brands python’) or a custom image

href
string

Optional URL that makes the entire card clickable

iconPosition
'top' | 'left'Defaults to top

The position of icon relative to the text.

color
string

Hex color value for the icon (e.g. #FF0F00). Ignored if lightModeColor and darkModeColor are both set

darkModeColor
string

Hex color value for the icon in dark mode (e.g. #FF0F00)

lightModeColor
string

Hex color value for the icon in light mode (e.g. #FF0F00)