Subcomponents

CardBody

The CardBody component is used to display the main content of a card. It supports rich text rendering with storyblok-rich-text-react-renderer. It can be used in combination with other card components like VideoCard, TeaserCard, and EditorialCard.

Usage

<CardBody text_color="OPTIONAL_COLOR_OPTION">
  {/* Your content here */}
</CardBody>

Props

Prop	Type	Description
text_color	Option	Optional color for the text inside the CardBody component.

CardFooter

The CardFooter component is used to display the footer content of a card. It also supports rich text rendering with storyblok-rich-text-react-renderer. It can be used in combination with other card components like VideoCard, TeaserCard, and EditorialCard.

Usage

<CardFooter text_color="OPTIONAL_COLOR_OPTION">
  {/* Your content here */}
</CardFooter>

Props

Prop	Type	Description
text_color	Option	Optional color for the text inside the CardFooter component.

CardImage

The CardImage component is used to display the image content of a card. It can be used in combination with other card components like VideoCard, TeaserCard, and EditorialCard.

Usage

<CardImage src="YOUR_IMAGE_SRC" alt="YOUR_IMAGE_ALT_TEXT" asChild={OPTIONAL_BOOLEAN} />

Props

Prop	Type	Description
src	string	The source URL for the image.
alt	string	The alternative text for the image.
asChild	boolean	Optional boolean to determine if the component should be rendered as a child.

CardTitle

The CardTitle component is used to display the title content of a card. It supports rich text rendering with storyblok-rich-text-react-renderer. It can be used in combination with other card components like VideoCard, TeaserCard, and EditorialCard.

Usage

<CardTitle variant="OPTIONAL_TITLE_VARIANT" text_color="OPTIONAL_COLOR_OPTION">
  {/* Your content here */}
</CardTitle>

Props

Prop	Type	Description
variant	string	Optional title variant, e.g., "title3".
text_color	Option	Optional color for the text inside the CardTitle component.

VideoCard All