EditorialCard

The EditorialCard component is a versatile and customizable card component that can be used to display different types of content such as images, titles, text, and card footers. It supports custom link rendering and provides focus and hover states.

Title

Body text

Footer content

Importing

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

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

Props

The following props can be passed to the EditorialCard component:

children: An array of elements, which can include CardImage, Text, CardTitle, CardBody, and CardFooter.
renderCustomLink (optional): A custom link component to be used instead of the default Link component.
href (optional): The URL to navigate to when the card or footer link is clicked.
target (optional): The target attribute for the link, e.g., _blank to open the link in a new window.

Usage

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

<EditorialCard href="https://example.com" target="_blank">
  <CardImage src="image.jpg" alt="Image description" />
  <CardTitle>Title</CardTitle>
  <CardBody>Body text</CardBody>
  <CardFooter>Footer content</CardFooter>
</EditorialCard>

Examples

Here's an example of using the EditorialCard component:

Title

Body text

Footer content

<EditorialCard
  href="https://example.com"
>
  <CardImage src="image.jpg" alt="Image description" aspectRatios={{ s: "1/1" }} />
  <CardTitle>Title</CardTitle>
  <CardBody>Body text</CardBody>
  <CardFooter>Footer content</CardFooter>
</EditorialCard>

CTACard TeaserCard