---
name: BundleCard B
route: /components/bundlecardb
menu: Components
---

import { Playground, PropsTable } from 'docz';
import BundleCardB from './BundleCard';

# BundleCard B

## Usage

```javascript
import { BundleCardB } from '@snowpak/powpow';

export default () => (
  <BundleCardB
    href="https://www.google.com"
    heading="Save 54%: upgrade + F$100 Bar Voucher + Dinner + Nanny + Spa + Flights"
    ...
  />;
);
```

## Props

<PropsTable of={BundleCardB} />

## Examples

<Playground
  style={{
    backgroundColor: '#fafafa',
    padding: '2em',
    width: 'auto',
  }}
>
  <BundleCardB
    heading="Save 54%: upgrade + F$100 Bar Voucher + Dinner + Nanny + Spa + Flights"
    description="6 Nights, Flights, Transfers, Upgrade, Theme Dinner, Nanny, Spa, Kids Stay, Play & Eat Free"
    tagline="Outrigger Fiji Beach Resort"
    imageSrc="https://www.statravel.com.au/static/au_division_web_live/assets/New_Zealand_-_Caleb_Riding_-_2015.jpg"
    imageAlt="Save 53%: Upgrade + F$100 Bar Voucher + Dinner + Nanny + Spa + Flights"
    nights="9 nights"
    location="Breckenridge"
    price="$1,499"
    strikethrough="$1,899"
    href="https://www.google.com"
    withRental
    withTicket
    withTransfer
    withLodging
    highlight="Last minute price drop!"
    bottomFomo="🔥 18 sold"
    endDate="2019-03-14"

    style={{
      width: '400px' // this is used for the example only
    }}
    data-cy="sp-bundleCard--default"

/>

</Playground>

### Without FOMO

<Playground
  style={{
    backgroundColor: '#fafafa',
    padding: '2em',
    width: 'auto',
  }}
>
  <BundleCardB
    heading="Save 54%: upgrade + F$100 Bar Voucher + Dinner + Nanny + Spa + Flights"
    description="6 Nights, Flights, Transfers, Upgrade, Theme Dinner, Nanny, Spa, Kids Stay, Play & Eat Free"
    tagline="Outrigger Fiji Beach Resort"
    imageSrc="https://www.statravel.com.au/static/au_division_web_live/assets/New_Zealand_-_Caleb_Riding_-_2015.jpg"
    imageAlt="Save 53%: Upgrade + F$100 Bar Voucher + Dinner + Nanny + Spa + Flights"
    nights="9 nights"
    location="Breckenridge"
    price="$1,499"
    href="https://www.google.com"
    withRental
    withTicket
    withTransfer
    withLodging

    style={{
      width: '400px' // this is used for the example only
    }}
    data-cy="sp-bundleCard--withoutHighlight"

/>

</Playground>

### Simplified

<Playground
  style={{
    backgroundColor: '#fafafa',
    padding: '2em',
    width: 'auto',
  }}
>
  <BundleCardB
    heading="Save 54%: upgrade + F$100 Bar Voucher + Dinner + Nanny + Spa + Flights"
    description="6 Nights, Flights, Transfers, Upgrade, Theme Dinner, Nanny, Spa, Kids Stay, Play & Eat Free"
    imageSrc="https://www.statravel.com.au/static/au_division_web_live/assets/New_Zealand_-_Caleb_Riding_-_2015.jpg"
    imageAlt="Save 53%: Upgrade + F$100 Bar Voucher + Dinner + Nanny + Spa + Flights"
    href="https://www.google.com"

    style={{
      width: '400px' // this is used for the example only
    }}
    data-cy="sp-bundleCard--simplified"

/>

</Playground>