Backpack graphic-promotion component.
npm install bpk-component-graphic-promotion``sh`
npm install bpk-component-graphic-promotion --save-dev
`tsx
import React from 'react';
import BpkGraphicPromo from 'bpk-component-graphic-promotion';
export default () => (
contentId="graphic-promo-1"
headline="Ride your wave"
invertVertically
onClick={() => redirect("https://www.sponsor-name.com/promotion")}
sponsor={{
label: 'Sponsored',
logo: './path/to/sponsor/logo.png',
altText: 'Sponsor Name',
}}
subheading="Portugal and 6 more countries have just been added to the UK travel green list"
tagline="Tagline"
textAlign={TEXT_ALIGN.start}
/>
);
`
| Property | PropType | Required | Default Value |
| ---------------- | ----------------- | -------- | ------------- |
| buttonText | string | true | - |
| headline | string | true | - |
| onClick | func | true | - |
| textAlign | oneOf(TEXT_ALIGN) | true | - |
| className | string | false | null |
| contentId | string | false | null |
| invertVertically | bool | false | false |
| sponsor | object | false | null |
| style | object | false | {} |
| subheading | string | false | null |
| tagline | string | false | null |
#### 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: stringlabel
- : stringlogo
- : string
##### Example
`ts``
const sponsor = {
label: 'Sponsored',
altText: 'Skyscanner',
logo: './path/to/skyscanner/logo.png',
};