Feature Card

This is the <ImageCard /> component along with <ImageCardContainer /> and <ImageCardContent />

These components work together but may also work individually for various uses.

---

Examples

ImageCardContainer

The Container that will display its children in column-view if mobile and row-view if larger than mobile (Adjust the screensize to see)

<ImageCardContainer>
  <div
    style={{ backgroundColor: 'hotpink', height: '300px', width: '100%' }}
  ></div>
  <div
    style={{ backgroundColor: '#1874cd', height: '300px', width: '100%' }}
  ></div>
</ImageCardContainer>

ImageCardContent

Dependening on whether the full prop is present, it will show one of two variants

The Title of this Card

The description that will go in this card

This does not have the `full` prop so the style has a gradient

<ImageCardContent
  title="The Title of this Card"
  description="The description that will go in this card"
>
  This does not have the `full` prop so the style has a gradient
</ImageCardContent>

The Title of this Card

The description that will go in this card

This DOES have the `full` prop so the style has a dark transparent background and has rounded corners

<ImageCardContent
  full
  title="The Title of this Card"
  description="The description that will go in this card"
>
  This DOES have the `full` prop so the style has a dark transparent background
  and has rounded corners
</ImageCardContent>

ImageCard

This will hold the background image

<ImageCard backgroundImageUrl="https://mlb.candy-local.com/milkyway/img/backgrounds/collection/mlb-showcase-banner.png" />

This one has the full prop and will be the full width. It is not necessary for the dev to add this as the ImageCardContainer will detect whether it needs to add the full prop or not.

<ImageCard
  full
  backgroundImageUrl="https://mlb.candy-local.com/milkyway/img/backgrounds/collection/mlb-showcase-banner.png"
/>

Used Together, it will display different variants:

The Title of this Card

The description that will go in this card

This DOES have the `full` prop so the style has a dark transparent background and has rounded corners

<ImageCardContainer>
  <ImageCard backgroundImageUrl="https://mlb.candy-local.com/milkyway/img/backgrounds/collection/mlb-showcase-banner.png">
    <ImageCardContent
      title="The Title of this Card"
      description="The description that will go in this card"
    >
      This DOES have the `full` prop so the style has a dark transparent
      background and has rounded corners
    </ImageCardContent>
  </ImageCard>
</ImageCardContainer>

And here is the full variant

The Title of this Card

The description that will go in this card

This DOES have the `full` prop so the style has a dark transparent background and has rounded corners

<ImageCardContainer>
  <ImageCard
    full
    backgroundImageUrl="https://mlb.candy-local.com/milkyway/img/backgrounds/collection/mlb-showcase-banner.png"
  >
    <ImageCardContent
      full
      title="The Title of this Card"
      description="The description that will go in this card"
    >
      This DOES have the `full` prop so the style has a dark transparent
      background and has rounded corners
    </ImageCardContent>
  </ImageCard>
</ImageCardContainer>

---

Basic Usage

import {
  ImageCardContainer,
  ImageCard,
  ImageCardContent,
} from '@candy/kitkat/image-card'

export const MyComponent = () => (
  <ImageCardContainer>
    <ImageCard
      full
      backgroundImageUrl="https://mlb.candy-local.com/milkyway/img/backgrounds/collection/mlb-showcase-banner.png"
    >
      <ImageCardContent
        full
        title="The Title of this Card"
        description="The description that will go in this card"
      >
        This DOES have the `full` prop so the style has a dark transparent
        background and has rounded corners
      </ImageCardContent>
    </ImageCard>
  </ImageCardContainer>
)

---

Props

Name	Type	Default	Description
children	ReactNode	-	Text Content
onClick	(e: React.MouseEvent<HTMLDivElement>) => void	-	Displays "DISMISS" text and hides Snackbar on DISMISS click