# C2 Hero Banner Component
### Overview
C2 Hero that allows you to pass an image, and position that will determine if Content is inside or below the image.

### Props
| Props                  | Type        | Default     | Valid Values               |
| ---------------------- | ----------- | ----------- | -------------------------- | 
| backgroundImage        | String      | Null        |                            |
| backgroundImageMobile  | String      | Null        |                            |
| backgroundColor        | String      | Null        | hex color                  |
| backgroundOverlay      | String      | Null        | rgba color                 |
| contentPosition        | String      | inside      | inside,below               |
| maxHeight              | String      | null        | px,rem,em,%                |
| mobileMediaBreakpoint  | String      | 420px       |                            |
| contentWrapperClasses  | String      | null        |                            |

### Slots
Default unamed slot

### Code snippet
```
    <c2-hero-banner 
        :background-image="'http://www.fillmurray.com/g/1200/300'"
        :background-image-mobile="'http://www.fillmurray.com/g/300/300'"
        :background-overlay="'rgba(0,0,0,0.5)'"
        :max-height="'300px'"
        :mobile-media-breakpoint="'767px'"
        :aspect-ratio="'4/1'"
        class="mb-10"
    >
    </c2-hero-banner>

    <c2-hero-banner 
        :background-color="'#fff'"
        :background-image="'http://www.fillmurray.com/g/1200/300'"
        :background-image-mobile="'http://www.fillmurray.com/g/300/300'"
        :background-overlay="'rgba(0,0,0,0.5)'"
        content-position="below"
        :max-height="'300px'"
        :mobile-media-breakpoint="'767px'"
        :aspect-ratio="'4/1'"
        class="mb-10"
    >
        <div class="container mx-auto pt-4">
            <h2 class="text-2xl mb-2">Content Below</h2>
            <p>Some paragraph text</p>
        </div>
    </c2-hero-banner>

    <c2-hero-banner 
        :background-color="'#fff'"
        :background-image="'http://www.fillmurray.com/g/1200/300'"
        :background-image-mobile="'http://www.fillmurray.com/g/300/300'"
        :background-overlay="'rgba(0,0,0,0.5)'"
        content-position="inside"
        :mobile-media-breakpoint="'767px'"
        :aspect-ratio="'4/1'"
        :content-wrapper-classes="'absolute inset-0 flex flex-col items-center justify-center'"
        class="mb-10"
    >
        <div class="p-4 text-white text-center">
            <h2 class="text-4xl mb-2">Content Inside</h2>
            <p>Some paragraph text</p>
        </div>
    </c2-hero-banner>

    <c2-hero-banner 
        :background-color="'#8CD3FF'"
        content-position="inside"
        class="mb-10"
    >
        <div class="container mx-auto py-32 px-4">
            <h2 class="text-4xl mb-4">Hero Background color Banner</h2>
            <p>Some paragraph text</p>
        </div>
    </c2-hero-banner>

    <c2-hero-banner 
        :background-color="'#8CD3FF'"
        content-position="inside"
        class="mb-10"
    >
        <div class="container mx-auto py-32 px-4 flex flex-col items-end">
            <h2 class="text-4xl mb-4">Hero Background color Banner</h2>
            <p>Some paragraph text</p>
        </div>
    </c2-hero-banner>
```