ContentCard

The ContentCard component is a versatile and flexible card component used to display content with an optional image, title, body, and footer. The card can be used in a vertical or horizontal layout and can be customized with various styles such as border-radius, shadow, and outline.

Title of the Card

Some description or content about the card.

Card Footer

Importing

Import the components as follows:

import {
  ContentCard,
  CardBody,
  CardFooter,
  CardImage,
  CardTitle,
} from '@ef-global/backpack/ContentCard';

Usage

To create a ContentCard, use the ContentCard component and add the required child components.

    <ContentCard href='/example'>
        <CardImage src='path/to/image.jpg' alt='Example' />
        <CardTitle>Title of the Card</CardTitle>
        <CardBody>TSome description or content about the card.</CardBody>
        <CardFooter>Card Footer</CardFooter>
    </ContentCard>

Props

Name	Type	Default	Description
horizontal	boolean	false	Set to `true` to display the card in a horizontal layout.
arrow	boolean	false	Set to `true` to display an arrow icon in the card.
href	string		The URL to navigate to when the card is clicked.
target	'_blank'		Set to `_blank` to open the link in a new tab.
radius	CardBorderRadiusValues		The border-radius of the card. Accepted values: 'sm', 'md', 'lg', 'xl', 'xxl', 'round'.
shadow	CardShadowValues		The shadow depth of the card. Accepted values: 'sm', 'md', 'lg', 'xl', 'xxl'.
outline	boolean	false	Set to `true` to display an outline around the card.
renderCustomLink	React.ElementType		The custom link component to be used.
children	ReactNode or Array of ReactNodes (see Slots)		The child components that make up the ContentCard.

Examples

Here are a few examples of how to use the ContentCard component:

Basic ContentCard

Title of the Card

Some description or content about the card.

Card Footer

    <ContentCard>
      <CardImage src="path/to/image.jpg" alt="Example Image" />
      <CardTitle>Title of the Card</CardTitle>
      <CardBody>Some description or content about the card.</CardBody>
    </ContentCard>

ContentCard with Custom Image Ratio

Title of the Card

Some description or content about the card.

Card Footer

    <ContentCard href="https://www.example.com" arrow>
      <CardImage src="path/to/image.jpg" alt="Example Image" />
      <CardTitle>Title of the Card</CardTitle>
      <CardBody>Some description or content about the card.</CardBody>
    </ContentCard>

ContentCard with Arrow

Title of the Card

Some description or content about the card.

Card Footer

    <ContentCard href="https://www.example.com" arrow>
      <CardImage src="path/to/image.jpg" alt="Example Image" />
      <CardTitle>Title of the Card</CardTitle>
      <CardBody>Some description or content about the card.</CardBody>
    </ContentCard>

ContentCard with Custom radius

Title of the Card

Some description or content about the card.

Card Footer

    <ContentCard href="https://www.example.com" radius='m'>
      <CardImage src="path/to/image.jpg" alt="Example Image" />
      <CardTitle>Title of the Card</CardTitle>
      <CardBody>Some description or content about the card.</CardBody>
    </ContentCard>

HeaderItemLeft and HeaderItemRight

The HeaderItemLeft and HeaderItemRight components are used to display content aligned to the left and right sides of a card header.

Importing

Import the components as follows:

import { HeaderItemLeft, HeaderItemRight } from '@ef-global/backpack/ContentCard';

Usage

To use the components, add them as children components inside the ContentCard component:

<ContentCard>
  <HeaderItemLeft>
    {/* Your left-aligned content here */}
  </HeaderItemLeft>
  <HeaderItemRight>
    {/* Your right-aligned content here */}
  </HeaderItemRight>
  {/* Other ContentCard child components */}
</ContentCard>

Examples

Here are a few examples of how to use the ContentCard component with HeaderItemLeft and HeaderItemRight:

ContentCard with HeaderItemLeft

Card Title

Optional card body text.

<ContentCard href='/example'>
  <CardImage src={imageSrc} alt='Example image' />
  <CardTitle>Card Title</CardTitle>
  <CardBody>Optional card body text.</CardBody>
  <HeaderItemLeft>
    <Tag tagType='label' value='left'>
      <TagText>Left Header Item</TagText>
    </Tag>
  </HeaderItemLeft>
</ContentCard>

ContentCard with HeaderItemRight

Card Title

Optional card body text.

<ContentCard href='/example'>
  <CardImage src={imageSrc} alt='Example image' />
  <CardTitle>Card Title</CardTitle>
  <CardBody>Optional card body text.</CardBody>
  <HeaderItemRight>
    <Tag tagType='label' value='right'>
      <TagText>Right Header Item</TagText>
    </Tag>
  </HeaderItemRight>
</ContentCard>

ContentCard with Both HeaderItemLeft and HeaderItemRight

Card Title

Optional card body text.

<ContentCard href='/example'>
  <CardImage src={imageSrc} alt='Example image' />
  <CardTitle>Card Title</CardTitle>
  <CardBody>Optional card body text.</CardBody>
  <HeaderItemLeft>
    <Tag tagType='label' value='left'>
      <TagText>Left Header Item</TagText>
    </Tag>
  </HeaderItemLeft>
  <HeaderItemRight>
    <Tag tagType='label' value='right'>
      <TagText>Right Header Item</TagText>
    </Tag>
  </HeaderItemRight>
</ContentCard>

Video CTACard