3.0.2 • Published 2 years ago

bpk-component-graphic-promotion-css v3.0.2

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

bpk-component-graphic-promotion

Installation

npm install bpk-component-graphic-promotion --save-dev

Usage

import React from 'react';
import BpkGraphicPromo from 'bpk-component-graphic-promotion';

export default () => (
  <BpkGraphicPromo
    tagline="Tagline"
    headline="Ride your wave"
    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
    sponsor={{
      label: 'Sponsored',
      logo: './path/to/sponsor/logo.png',
      altText: 'Sponsor Name',
    }}
    buttonText="Learn more"
    onClick={() => redirect("https://www.sponsor-name.com/promotion")}
    textAlign={TEXT_ALIGN.start}
    invertVertically
  />
);

Props

PropertyPropTypeRequiredDefault Value
buttonTextstringtrue-
headlinestringtrue-
invertVerticallybooltrue-
onClickfunctrue-
textAlignoneOf(TEXT_ALIGN)true-
classNamestringfalsenull
styleobjectfalse{}
taglinestringfalsenull
sponsorobjectfalsenull
subheadingstringfalsenull

Prop Details

sponsor

An object that groups together all the sponsor related properties. This should only be provided if the graphic promo is sponsored, in which case all of the object's properties are required.

The object consists of the following fields:

  • altText: string
  • label: string
  • logo: string
Example
const sponsor = {
  label: 'Sponsored',
  altText: 'Skyscanner',
  logo: './path/to/skyscanner/logo.png',
};