TeaserCard

The TeaserCard component is a clean, minimal card component designed to display images and titles. It also supports custom link rendering, hover effects, and an optional animated arrow.

Importing

To import the TeaserCard component, use the following import statement:

import { TeaserCard } from '@ef-global/backpack/TeaserCard';

Props

Name	Type	Default	Description
children	Array of `CardImage` and/or `CardTitle` elements or `CardImage`	-	The child components of the `TeaserCard`, including images and titles.
renderCustomLink	React.ElementType (optional)	`Link`	A custom link component to be used instead of the default `Link` component.
shadow	CardShadowValues (optional)	'off'	The shadow style for the card.
radius	CardBorderRadiusValues (optional)	-	The border radius for the card.
arrow	boolean (optional)	-	Whether to display an animated arrow when hovered.
href	string	-	The URL to navigate to when the card is clicked.
target	'_blank' (optional)	-	The target attribute for the link, e.g., `_blank` to open the link in a new window.

Usage

To use the TeaserCard component, provide the required child components as children prop and any optional props as needed:

<TeaserCard href="https://example.com" target="_blank" arrow>
  <CardImage src="image.jpg" alt="Image description" />
  <CardTitle>Title</CardTitle>
</TeaserCard>

Examples

With custom border radius

<TeaserCard
  href="https://example.com"
  target="_blank"
  radius="m"
>
  <CardImage src="image.jpg" alt="Image description" />
  <CardTitle>Title</CardTitle>
</TeaserCard>

With shadow

<TeaserCard
  href="https://example.com"
  target="_blank"
  shadow='enabled'
>
  <CardImage src="image.jpg" alt="Image description" />
  <CardTitle>Title</CardTitle>
</TeaserCard>

EditorialCard VideoCard