@berlitz/feature-card

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