Feature Card

Adds a full size featured card to your page, you may add children components for content, accepts a featured image or youtube video id. By default the featured image is on the left and card content on the right. This card can also be flipped with the reverse prop.

Installation

yarn add @berlitz/feature-card

Props

| Argument | Type | Required | Default | Example | | -------------- | ------ | -------------------------------- | ------- | ----------------------- | | children | node | ✅ | | | | column | bool | Display image on top of content. | false | | image | string | | | | | imageAltText | string | | | | | imageMobile | string | | | | | imageLink | string | | | https://www.berlitz.com | | imageTarget | string | | | _blank | _self | | imageOnly | bool | | false | | | reverse | bool | | false | | | youtubeVideoId | string | | | |

Usage

import FeatureCard from '@berlitz/feature-card'
const MyApp = () => (
  <App>
    <FeatureCard
      image="https://picsum.photos/900/500"
      imageMobile="https://picsum.photos/600/400"
    >
      <H3>The Power of Understanding</H3>
      <StyledP size="md">{content}</StyledP>
      <Button fullWidth={['xs']}>Explore our languages</Button>
    </FeatureCard>
  </App>
)

When to use this component

Landing Pages, Home Page, anywhere you want to display a large feature card for infomation with a beautiful featured image/video