---
name: BundleCard A
route: /components/bundlecarda
menu: Components
---

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

# BundleCard A

## Usage

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

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

## Props

<PropsTable of={BundleCardA} />

## Examples

<Playground
  style={{
    backgroundColor: '#fafafa',
    padding: '2em',
    width: 'auto',
  }}
>
  <BundleCardA
    title="8 Nights Family Package Deal"
    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"
    lodgingType="Ski-in / ski-out"
    hotelName="Village at Breckenridge Resort"
    price="$1,499"
    strikethrough="$1,899"
    href="https://www.google.com"
    fomo={{
      top: 'Last minute price drop!',
      bottom: '🔥 18 sold'
    }}
    tripadvisor={{
      image: 'https://www.tripadvisor.com/img/cdsi/img2/ratings/traveler/4.0-58018-5.svg',
      alt: '5 stars'
    }}
    inclusions={`<ul>
      <li>8 nights stay at Breackenridge Hotel</li>
      <li>Return flights</li>
      <li>8 days lift tickets</li>
      <li>Return transfer</li>
    </ul>`}

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

/>

</Playground>