---
name: Hero
route: /components/hero
menu: Components
---

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

# Hero

## Usage

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

export default () => (
  <Hero heading="Top Breckenridge Ski Packages" />;
);
```

## Props

<PropsTable of={Hero} />

## Examples

<Playground>
  <Hero
    heading="All-Inclusive Ski Packages, Ski & Stay Vacation Trips 19/20"
    lead="Lodging, lift tickets, rentals, lessons and transfers"
    image="https://images.vailresorts.com/image/upload/c_scale,dpr_1.0,f_auto,q_auto,w_2000/v1/Breckenridge/Products/Brochure/Deals-And-Promos/AUS/ImagePromotion.jpg"
    data-cy="sp-hero"
  />
</Playground>

<Playground>
  <Hero
    type="withoutTransparency"
    heading="Top Breckenridge Ski Packages"
    image="https://images.vailresorts.com/image/upload/c_scale,dpr_1.0,f_auto,q_auto,w_2000/v1/Breckenridge/Products/Brochure/Deals-And-Promos/AUS/ImagePromotion.jpg"
    data-cy="sp-hero"
  />
</Playground>