@aurolabs/auro-banner/demo/demo.md

aurolabs-banner HTML custom element

# Banner

The `<auro-banner>` element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image and some type of value proposition.

The component is broken down into two main parts `content`, `graphic`. There are also a few optional boolean properties `overlay`, `roundedBorder`, `onBackground` `inset` and `flipped`. And two properties `overlayBg` and `ratio` that accept additional attributes.

## Component use cases

Use the `<auro-banner>` element to:

- grab the attention of a user
- direct your user to another resource for further information

## Do not...

Use `<auro-banner>` as the primary source of information.

## Default element

The default `<auro-banner>` element using the `content` and `graphic` slots for structured content placement.

<div class="exampleWrapper">
  <auro-banner>
    <auro-background slot="graphic" height="215px" heightsm="340px" background="#b4cdd2 url(https://picsum.photos/id/430/1124/800) center bottom/cover no-repeat;">
    </auro-background>
    <div slot="content">
      <img
        src="https://sitecore-test-single-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png"
        alt="Random insert"/>
      <p>
        We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
      </p>
      <auro-hyperlink
        cta
        secondary
        href="/"
        target="_blank">
        More info
      </auro-hyperlink>
    </div>
  </auro-banner>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner>
  <auro-background slot="graphic" height="215px" heightsm="340px" background="#b4cdd2 url(https://picsum.photos/id/430/1124/800) center bottom/cover no-repeat;">
  </auro-background>
  <div slot="content">
    <img src="https://sitecore-test-single-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png" alt="Random insert" />
    <p>We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.</p>
    <auro-hyperlink cta secondary href="/" target="_blank"> More info </auro-hyperlink>
  </div>
</auro-banner>
```

</auro-accordion>

## Flipped

The `<auro-banner flipped>` element with the `flipped` property will have the left side of the show the `graphic` and the right side will show the `content`. The image will still stack on top of the content on mobile.

<div class="exampleWrapper">
<auro-banner flipped>
    <auro-background slot="graphic" height="215px" heightsm="340px" background="#b4cdd2 url(https://picsum.photos/id/430/1124/800) center bottom/cover no-repeat;">
    </auro-background>
  <div slot="content">
    <img
      src="https://sitecore-test-single-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png"
      alt="Random insert"/>
    <p>
      We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
    </p>
    <auro-hyperlink
      cta
      secondary
      href="/"
      target="_blank">
      More info
    </auro-hyperlink>
  </div>
</auro-banner>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner flipped>
  <auro-background slot="content" height="215px" heightsm="340px" background="#b4cdd2 url(https://picsum.photos/id/430/1124/800) center bottom/cover no-repeat;">
  </auro-background>
  <div slot="graphic">
    <img src="https://sitecore-test-single-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png" alt="Random insert" />
    <p>We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.</p>
    <auro-hyperlink cta secondary href="/" target="_blank"> More info </auro-hyperlink>
  </div>
</auro-banner>
```

</auro-accordion>

## Ratio

The following example illustrates how to use the `ratio` property to control the width of the left and right side of the banner. The structure is `{leftRatio}:{rightRatio}` where the left and right ratios are the comparison of sizes between the two parts of the banner. In this example we set it to `2:3` so the left hand side takes up 40% of the page and the right takes up 60%. You could also set the ratio to `40:60` to get the same results.

<div class="exampleWrapper">
  <auro-banner ratio="2:3">
    <auro-background slot="graphic" height="215px" heightsm="300px" background="#b4cdd2 url(https://picsum.photos/id/42/1124/800) bottom right/cover no-repeat;"></auro-background>
    <div slot="content">
     <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
    <div style="color:#0b5575; margin-bottom: 1rem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank" >Reprehenderit</auro-hyperlink>
    </div>
  </auro-banner>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner ratio="2:3">
  <auro-background
    slot="graphic"
    height="215px"
    heightsm="300px"
    background="#b4cdd2 url(https://picsum.photos/id/42/1124/800) bottom right/cover no-repeat;"
  ></auro-background>
  <div slot="content">
    <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
    <div style="color:#0b5575; margin-bottom: 1rem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank">Reprehenderit</auro-hyperlink>
  </div>
</auro-banner>
```

</auro-accordion>

### Zero Ratio

If the ratio of one of the sides is set to zero, for example `0:1`, the slot is removed.

<div class="exampleWrapper">
  <auro-background background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/oneworld-hub/T-Bright-Small.png) center bottom/cover" height="530px" backgroundsm="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/oneworld-hub/Tbright-L.png) left center/cover" heightsm="302px">
    <auro-banner ratio="0:1" onbackground>
      <div slot="graphic" style="text-align:center; align-self: center">
        <img src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png">
        <div style="margin: 1rem auto;max-width: 500px;">
           With more than 1,000 destinations in 170 territories, oneworld fares let you travel the world with ease.
        </div>
        <auro-hyperlink href="https://www.oneworld.com/flight-search" target="_blank" cta="true" secondary="true" nav="true"><span>Search flights</span></auro-hyperlink>
      </div>
    </auro-banner>
  </auro-background>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-background
  background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/oneworld-hub/T-Bright-Small.png) center bottom/cover"
  height="530px"
  backgroundsm="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/oneworld-hub/Tbright-L.png) left center/cover"
  heightsm="200px"
>
  <auro-banner ratio="0:1" onbackground>
    <div slot="graphic" style="text-align:center; align-self: center">
      <img src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/examples/oneworld-travel-bright-Horizontal-300.png" />
      <div style="margin: 1rem auto;max-width: 500px;">With more than 1,000 destinations in 170 territories, oneworld fares let you travel the world with ease.</div>
      <auro-hyperlink href="https://www.oneworld.com/flight-search" target="_blank" cta="true" secondary="true" nav="true"><span>Search flights</span></auro-hyperlink>
    </div>
  </auro-banner>
</auro-background>
```

</auro-accordion>

## Overlay

The following example illustrates a `<auro-banner>` custom element using the `overlay` slot. You'll need to include the boolean `overlay` to display the overlay. This fixes an icon to the bottom of the banner.

<div class="exampleWrapper">
  <auro-banner overlay overlayBg="var(--auro-color-brand-neutral-400)">
      <auro-background slot="graphic" height="215px" heightsm="300px" backgroundsm="#b4cdd2 url(https://images.unsplash.com/photo-1500304624028-5b2641868ade?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80) right center/cover no-repeat;"></auro-background>
    <div slot="content">
      <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
      <div style="color:#0b5575; margin-bottom: 1rem">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
      </div>
      <auro-hyperlink primary cta href="#" target="_blank" >Reprehenderit</auro-hyperlink>
    </div>
    <span slot="overlay">
      <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
    </span>
  </auro-banner>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner overlay overlayBg="var(--auro-color-brand-neutral-400)">
  <auro-background
    slot="graphic"
    height="215px"
    heightsm="300px"
    backgroundsm="#b4cdd2 url(https://images.unsplash.com/photo-1500304624028-5b2641868ade?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80) right center/cover no-repeat;"
  ></auro-background>
  <div slot="content">
    <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
    <div style="color:#0b5575; margin-bottom: 1rem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
    </div>
    <auro-hyperlink primary cta href="#" target="_blank">Reprehenderit</auro-hyperlink>
  </div>
  <span slot="overlay">
    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
  </span>
</auro-banner>
```

</auro-accordion>

## OnBackground

The following example illustrates a `<auro-banner>` custom element wrapped in `<auro-background>` with only the `content` slot is filled. This examples uses `onbackground` to give additional padding inside the `<auro-background>`.

<div class="exampleWrapper">
  <auro-background height="475px" background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/esg-update/UNCF_merch_1167x282.jpg) left bottom/cover" heightsm="255px">
      <auro-banner flipped ratio="2:3" onbackground>
        <div slot="content">
          <img src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/esg-update/AS_UNCF_Lockup.svg">
          <div style="margin-bottom: 1rem">
          Our newest special aircraft is a symbol of Our Commitment to making Alaska a place where everyone feels like they belong.
          </div>
        <auro-hyperlink secondary="" cta="" href="/content/about-us/esg/people/uncf">Learn about Our Commitment</auro-hyperlink>
        </div>
      </auro-banner>
    </auro-background>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-background
  height="475px"
  background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/esg-update/UNCF_merch_1167x282.jpg) left bottom/cover"
  heightsm="200px"
>
  <auro-banner flipped ratio="2:3" onbackground>
    <div slot="graphic">
      <img src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/esg-update/AS_UNCF_Lockup.svg" />
      <div style="margin-bottom: 1rem">Our newest special aircraft is a symbol of Our Commitment to making Alaska a place where everyone feels like they belong.</div>
      <auro-hyperlink secondary="" cta="" href="/content/about-us/esg/people/uncf">Learn about Our Commitment</auro-hyperlink>
    </div>
  </auro-banner>
</auro-background>
```

</auro-accordion>

## Inset

This example showcases an `<auro-banner>` wrapped in `<auro-background background="var(--auro-color-brand-midnight-400)">` when using a background we can add additional padding to the `content` slot by applying the `inset` property.

<div class="exampleWrapper">
     <auro-background height="600px" background="var(--auro-color-brand-midnight-400)">
      <auro-banner inset>
        <div slot="content">
        <svg style="margin-bottom: .5rem" class="mileage-plan-logo" slot="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195.08 76"><defs><style>.mileage-plan-logo {width:200px; height: auto}.cls-1{fill:#fff;}</style></defs><title>Alaska Mileage Plan </title><g id="Layer_2" data-name="Layer 2"><g id="logo"><g id="Alaska"><path class="cls-1" d="M70.61,1.71,54.17,29.3a20.06,20.06,0,0,0-2.9,8.47H44.83c.44-3.49,1.8-6.81,4.63-11.57L61,6.92c2.29-3.82,4.58-5.21,8.74-5.21Z"></path><path class="cls-1" d="M69.34,30.67c-1.2,1.11-3.53,2.79-5.49,2.85-1.35-.06-1.41-1.32-.5-3.07C66.82,23.8,70.47,20.28,75,20.29h.82Zm6.08-14.11c-8.34,0-13.46,4.85-18,15.48-1.13,2.67-1.78,6,2.07,5.93A17.6,17.6,0,0,0,68,35a9.3,9.3,0,0,0-.24,2.81h5.85a22,22,0,0,1,3-8.57L83.88,17A78.8,78.8,0,0,0,75.42,16.56Z"></path><path class="cls-1" d="M129.46,30.67c-1.2,1.11-3.53,2.79-5.49,2.85-1.36-.06-1.41-1.32-.5-3.07,3.47-6.65,7.12-10.17,11.62-10.16h.82Zm6.08-14.11c-8.34,0-13.46,4.85-18,15.48-1.13,2.67-1.78,6,2.07,5.93a17.63,17.63,0,0,0,8.45-3,9.3,9.3,0,0,0-.24,2.81h5.85a22,22,0,0,1,3-8.57L144,17A78.8,78.8,0,0,0,135.54,16.56Z"></path><path class="cls-1" d="M116.53,43.65h-1.91a5.53,5.53,0,0,1-5.33-4l-2.9-11L101,37.77H94.72l17.4-29.44c2.24-3.82,4.58-5.21,8.73-5.21h.64L109.94,22.63l8.66-6h7L111,26.72h0Z"></path><path class="cls-1" d="M59.13,0c-5.87,0-8.9,1.55-14.66,5.71L25,19.75H12.53c-3.61,0-6.5.15-8.77,2.29L.53,25l18.12-.7L0,37.77H8.06L27.14,24c3.7-.14,6.27-.24,6.29-.23,4.45-.12,6.91-4,6.91-4H33L48.44,8.63,37,27.19c-2.45,4.27-3.63,7.31-4,10.58h6.62a20.09,20.09,0,0,1,2.91-8.47l15.6-26c1.08-1.79,2-3.25,2-3.25Z"></path><path class="cls-1" d="M90.19,22.53c-.08.56.14.89,1.26,1.62l1.79,1.17a5,5,0,0,1,2.49,4.75C95.08,34.44,91.87,38,85.05,38a38.83,38.83,0,0,1-7.89-.69l2.65-4.46a29.83,29.83,0,0,0,5.72.64c2.57,0,3.59-1.15,3.73-2.1.09-.56-.18-1.21-1.4-2.05l-1.42-1c-2.27-1.62-2.86-2.9-2.57-4.91.57-3.87,5-6.82,11.25-6.82a59.78,59.78,0,0,1,6.4.36L99,21.14A56.25,56.25,0,0,0,93.27,21C91.48,21,90.32,21.63,90.19,22.53Z"></path></g><path class="cls-1" d="M140.43,33.92a2.07,2.07,0,1,1-2,2.07A2.07,2.07,0,0,1,140.43,33.92Zm0,3.73a1.66,1.66,0,1,0-1.6-1.66A1.61,1.61,0,0,0,140.43,37.65Zm-.25-.56h-.43V34.85h.78a.7.7,0,0,1,.27,1.37l.5.87h-.48l-.48-.83h-.16Zm.29-1.2c.25,0,.39-.13.39-.33s-.14-.35-.39-.35h-.29v.68Z"></path><path class="cls-1" d="M40.37,69.28V51.21L32.44,69.28H29.5L21.64,51.21V69.28H18.47V46.07h4.35L31,65l8.24-18.89h4.29V69.28Z"></path><path class="cls-1" d="M49.86,45.35a2.21,2.21,0,1,1-2.19,2.23A2.2,2.2,0,0,1,49.86,45.35ZM48.35,69.28V53.54h3V69.28Z"></path><path class="cls-1" d="M56.2,69.28V45.58h3.08v23.7Z"></path><path class="cls-1" d="M77.33,64.8a7.13,7.13,0,0,1-7.07,5c-4.22,0-7.92-3.07-7.92-8.41,0-4.94,3.57-8.31,7.53-8.31,4.85,0,7.56,3.33,7.56,8.25a7.58,7.58,0,0,1-.06,1H65.52a4.67,4.67,0,0,0,4.74,4.78,4.29,4.29,0,0,0,4.42-3.18Zm-3.11-5a4,4,0,0,0-4.32-4,4.24,4.24,0,0,0-4.29,4Z"></path><path class="cls-1" d="M85.2,60.28l4.26-.62c1-.13,1.21-.62,1.21-1.18,0-1.54-1-2.82-3.4-2.82a3.35,3.35,0,0,0-3.57,3.18l-3-.69c.33-3,3-5.1,6.45-5.1,4.72,0,6.55,2.68,6.55,5.76V66.7a14.15,14.15,0,0,0,.2,2.58h-3a12.09,12.09,0,0,1-.16-2.12,5.75,5.75,0,0,1-5.07,2.61c-3.21,0-5.28-2.22-5.28-4.71C80.42,62.25,82.49,60.67,85.2,60.28Zm5.47,2.26v-.72l-4.81.72a2.36,2.36,0,0,0-2.29,2.36,2.38,2.38,0,0,0,2.55,2.29C88.64,67.19,90.67,66,90.67,62.54Z"></path><path class="cls-1" d="M99.77,69.45a4.19,4.19,0,0,0,4.29,3.86c3.31,0,4.81-1.7,4.81-5.11V65.94a5.24,5.24,0,0,1-4.81,2.59c-4.19,0-7.23-3.18-7.23-7.63,0-4.25,2.91-7.66,7.23-7.66,2.43,0,4.06.92,4.85,2.49V53.54h3V68.11c0,4-2,7.89-7.89,7.89-3.93,0-6.87-2.49-7.27-5.87ZM109,60.9c0-3-1.84-5-4.49-5s-4.55,2-4.55,5,1.77,5,4.55,5S109,64,109,60.9Z"></path><path class="cls-1" d="M130.33,64.8a7.14,7.14,0,0,1-7.07,5c-4.23,0-7.92-3.07-7.92-8.41,0-4.94,3.56-8.31,7.53-8.31,4.84,0,7.56,3.33,7.56,8.25a5.91,5.91,0,0,1-.07,1H118.51a4.69,4.69,0,0,0,4.75,4.78,4.29,4.29,0,0,0,4.42-3.18Zm-3.11-5a4,4,0,0,0-4.32-4,4.24,4.24,0,0,0-4.29,4Z"></path><path class="cls-1" d="M141.8,59.79v9.49h-3.21V46.07H147c4.29,0,7.17,3,7.17,6.88s-2.88,6.84-7.17,6.84Zm4.65-2.88c2.78,0,4.49-1.54,4.49-3.93s-1.71-4-4.49-4H141.8v8Z"></path><path class="cls-1" d="M157.08,69.28V45.58h3.08v23.7Z"></path><path class="cls-1" d="M168.77,60.28l4.25-.62c.95-.13,1.21-.62,1.21-1.18,0-1.54-1-2.82-3.4-2.82a3.35,3.35,0,0,0-3.57,3.18l-2.95-.69c.33-3,3.05-5.1,6.45-5.1,4.72,0,6.55,2.68,6.55,5.76V66.7a14.15,14.15,0,0,0,.2,2.58h-3a12.09,12.09,0,0,1-.16-2.12,5.75,5.75,0,0,1-5.07,2.61c-3.21,0-5.27-2.22-5.27-4.71C164,62.25,166.05,60.67,168.77,60.28Zm5.46,2.26v-.72l-4.81.72a2.36,2.36,0,0,0-2.29,2.36,2.38,2.38,0,0,0,2.55,2.29C172.2,67.19,174.23,66,174.23,62.54Z"></path><path class="cls-1" d="M184.67,69.28H181.6V53.54h3v2.25a5.38,5.38,0,0,1,4.84-2.71c3.77,0,5.63,2.71,5.63,6.22v10H192V59.82c0-2.19-.92-4-3.67-4-2.42,0-3.67,1.93-3.67,4.32Z"></path></g></g></svg>
          <div style="color:white; margin-bottom: 1rem">
            Mileage Plan is Alaska's loyalty program. Travel with us, <b>one</b>world Alliance members and our Global Partners to over 1,000 destinations around the world.
          </div>
          <auro-hyperlink href="https://www.alaskaair.com/account/join-mileage-plan?int=AS_ow-banner_MPJoin_-prodID:MPEnroll" cta="true" secondary="true" nav="true"><span>Join Mileage Plan</span></auro-hyperlink>
        </div>
        <div slot="graphic">
          <auro-background height="250px" heightsm="430px" heightmd="358px" heightlg="335px" background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/oneworld-hub/MP-L.png) bottom center/cover"></auro-background>
        </div>
      </auro-banner>
  </auro-background>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-background height="600px" background="var(--auro-color-brand-midnight-400)">
  <auro-banner inset>
    <div slot="content">
      <svg style="margin-bottom: .5rem" class="mileage-plan-logo" slot="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195.08 76">
        <defs>
          <style>
            .mileage-plan-logo {
              width: 200px;
              height: auto;
            }
            .cls-1 {
              fill: #fff;
            }
          </style>
        </defs>
        <title>Alaska Mileage Plan</title>
        <g id="Layer_2" data-name="Layer 2">
          <g id="logo">
            <g id="Alaska">
              <path class="cls-1" d="M70.61,1.71,54.17,29.3a20.06,20.06,0,0,0-2.9,8.47H44.83c.44-3.49,1.8-6.81,4.63-11.57L61,6.92c2.29-3.82,4.58-5.21,8.74-5.21Z"></path>
              <path
                class="cls-1"
                d="M69.34,30.67c-1.2,1.11-3.53,2.79-5.49,2.85-1.35-.06-1.41-1.32-.5-3.07C66.82,23.8,70.47,20.28,75,20.29h.82Zm6.08-14.11c-8.34,0-13.46,4.85-18,15.48-1.13,2.67-1.78,6,2.07,5.93A17.6,17.6,0,0,0,68,35a9.3,9.3,0,0,0-.24,2.81h5.85a22,22,0,0,1,3-8.57L83.88,17A78.8,78.8,0,0,0,75.42,16.56Z"
              ></path>
              <path
                class="cls-1"
                d="M129.46,30.67c-1.2,1.11-3.53,2.79-5.49,2.85-1.36-.06-1.41-1.32-.5-3.07,3.47-6.65,7.12-10.17,11.62-10.16h.82Zm6.08-14.11c-8.34,0-13.46,4.85-18,15.48-1.13,2.67-1.78,6,2.07,5.93a17.63,17.63,0,0,0,8.45-3,9.3,9.3,0,0,0-.24,2.81h5.85a22,22,0,0,1,3-8.57L144,17A78.8,78.8,0,0,0,135.54,16.56Z"
              ></path>
              <path
                class="cls-1"
                d="M116.53,43.65h-1.91a5.53,5.53,0,0,1-5.33-4l-2.9-11L101,37.77H94.72l17.4-29.44c2.24-3.82,4.58-5.21,8.73-5.21h.64L109.94,22.63l8.66-6h7L111,26.72h0Z"
              ></path>
              <path
                class="cls-1"
                d="M59.13,0c-5.87,0-8.9,1.55-14.66,5.71L25,19.75H12.53c-3.61,0-6.5.15-8.77,2.29L.53,25l18.12-.7L0,37.77H8.06L27.14,24c3.7-.14,6.27-.24,6.29-.23,4.45-.12,6.91-4,6.91-4H33L48.44,8.63,37,27.19c-2.45,4.27-3.63,7.31-4,10.58h6.62a20.09,20.09,0,0,1,2.91-8.47l15.6-26c1.08-1.79,2-3.25,2-3.25Z"
              ></path>
              <path
                class="cls-1"
                d="M90.19,22.53c-.08.56.14.89,1.26,1.62l1.79,1.17a5,5,0,0,1,2.49,4.75C95.08,34.44,91.87,38,85.05,38a38.83,38.83,0,0,1-7.89-.69l2.65-4.46a29.83,29.83,0,0,0,5.72.64c2.57,0,3.59-1.15,3.73-2.1.09-.56-.18-1.21-1.4-2.05l-1.42-1c-2.27-1.62-2.86-2.9-2.57-4.91.57-3.87,5-6.82,11.25-6.82a59.78,59.78,0,0,1,6.4.36L99,21.14A56.25,56.25,0,0,0,93.27,21C91.48,21,90.32,21.63,90.19,22.53Z"
              ></path>
            </g>
            <path
              class="cls-1"
              d="M140.43,33.92a2.07,2.07,0,1,1-2,2.07A2.07,2.07,0,0,1,140.43,33.92Zm0,3.73a1.66,1.66,0,1,0-1.6-1.66A1.61,1.61,0,0,0,140.43,37.65Zm-.25-.56h-.43V34.85h.78a.7.7,0,0,1,.27,1.37l.5.87h-.48l-.48-.83h-.16Zm.29-1.2c.25,0,.39-.13.39-.33s-.14-.35-.39-.35h-.29v.68Z"
            ></path>
            <path class="cls-1" d="M40.37,69.28V51.21L32.44,69.28H29.5L21.64,51.21V69.28H18.47V46.07h4.35L31,65l8.24-18.89h4.29V69.28Z"></path>
            <path class="cls-1" d="M49.86,45.35a2.21,2.21,0,1,1-2.19,2.23A2.2,2.2,0,0,1,49.86,45.35ZM48.35,69.28V53.54h3V69.28Z"></path>
            <path class="cls-1" d="M56.2,69.28V45.58h3.08v23.7Z"></path>
            <path
              class="cls-1"
              d="M77.33,64.8a7.13,7.13,0,0,1-7.07,5c-4.22,0-7.92-3.07-7.92-8.41,0-4.94,3.57-8.31,7.53-8.31,4.85,0,7.56,3.33,7.56,8.25a7.58,7.58,0,0,1-.06,1H65.52a4.67,4.67,0,0,0,4.74,4.78,4.29,4.29,0,0,0,4.42-3.18Zm-3.11-5a4,4,0,0,0-4.32-4,4.24,4.24,0,0,0-4.29,4Z"
            ></path>
            <path
              class="cls-1"
              d="M85.2,60.28l4.26-.62c1-.13,1.21-.62,1.21-1.18,0-1.54-1-2.82-3.4-2.82a3.35,3.35,0,0,0-3.57,3.18l-3-.69c.33-3,3-5.1,6.45-5.1,4.72,0,6.55,2.68,6.55,5.76V66.7a14.15,14.15,0,0,0,.2,2.58h-3a12.09,12.09,0,0,1-.16-2.12,5.75,5.75,0,0,1-5.07,2.61c-3.21,0-5.28-2.22-5.28-4.71C80.42,62.25,82.49,60.67,85.2,60.28Zm5.47,2.26v-.72l-4.81.72a2.36,2.36,0,0,0-2.29,2.36,2.38,2.38,0,0,0,2.55,2.29C88.64,67.19,90.67,66,90.67,62.54Z"
            ></path>
            <path
              class="cls-1"
              d="M99.77,69.45a4.19,4.19,0,0,0,4.29,3.86c3.31,0,4.81-1.7,4.81-5.11V65.94a5.24,5.24,0,0,1-4.81,2.59c-4.19,0-7.23-3.18-7.23-7.63,0-4.25,2.91-7.66,7.23-7.66,2.43,0,4.06.92,4.85,2.49V53.54h3V68.11c0,4-2,7.89-7.89,7.89-3.93,0-6.87-2.49-7.27-5.87ZM109,60.9c0-3-1.84-5-4.49-5s-4.55,2-4.55,5,1.77,5,4.55,5S109,64,109,60.9Z"
            ></path>
            <path
              class="cls-1"
              d="M130.33,64.8a7.14,7.14,0,0,1-7.07,5c-4.23,0-7.92-3.07-7.92-8.41,0-4.94,3.56-8.31,7.53-8.31,4.84,0,7.56,3.33,7.56,8.25a5.91,5.91,0,0,1-.07,1H118.51a4.69,4.69,0,0,0,4.75,4.78,4.29,4.29,0,0,0,4.42-3.18Zm-3.11-5a4,4,0,0,0-4.32-4,4.24,4.24,0,0,0-4.29,4Z"
            ></path>
            <path
              class="cls-1"
              d="M141.8,59.79v9.49h-3.21V46.07H147c4.29,0,7.17,3,7.17,6.88s-2.88,6.84-7.17,6.84Zm4.65-2.88c2.78,0,4.49-1.54,4.49-3.93s-1.71-4-4.49-4H141.8v8Z"
            ></path>
            <path class="cls-1" d="M157.08,69.28V45.58h3.08v23.7Z"></path>
            <path
              class="cls-1"
              d="M168.77,60.28l4.25-.62c.95-.13,1.21-.62,1.21-1.18,0-1.54-1-2.82-3.4-2.82a3.35,3.35,0,0,0-3.57,3.18l-2.95-.69c.33-3,3.05-5.1,6.45-5.1,4.72,0,6.55,2.68,6.55,5.76V66.7a14.15,14.15,0,0,0,.2,2.58h-3a12.09,12.09,0,0,1-.16-2.12,5.75,5.75,0,0,1-5.07,2.61c-3.21,0-5.27-2.22-5.27-4.71C164,62.25,166.05,60.67,168.77,60.28Zm5.46,2.26v-.72l-4.81.72a2.36,2.36,0,0,0-2.29,2.36,2.38,2.38,0,0,0,2.55,2.29C172.2,67.19,174.23,66,174.23,62.54Z"
            ></path>
            <path
              class="cls-1"
              d="M184.67,69.28H181.6V53.54h3v2.25a5.38,5.38,0,0,1,4.84-2.71c3.77,0,5.63,2.71,5.63,6.22v10H192V59.82c0-2.19-.92-4-3.67-4-2.42,0-3.67,1.93-3.67,4.32Z"
            ></path>
          </g>
        </g>
      </svg>
      <div style="color:white; margin-bottom: 1rem">
        Mileage Plan is Alaska's loyalty program. Travel with us, <b>one</b>world Alliance members and our Global Partners to over 1,000 destinations around the world.
      </div>
      <auro-hyperlink href="https://www.alaskaair.com/account/join-mileage-plan?int=AS_ow-banner_MPJoin_-prodID:MPEnroll" cta="true" secondary="true" nav="true"
        ><span>Join Mileage Plan</span></auro-hyperlink
      >
    </div>
    <div slot="graphic">
      <auro-background
        height="250px"
        heightsm="430px"
        heightmd="358px"
        heightlg="335px"
        background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/oneworld-hub/MP-L.png) bottom center/cover"
      ></auro-background>
    </div>
  </auro-banner>
</auro-background>
```

</auro-accordion>

## RoundedBorder

The following example illustrates a `<auro-banner>` custom element with the `roundedBorder` variant style.

<div class="exampleWrapper">
  <auro-banner roundedBorder flipped ratio="2:4">
    <div slot="content">
       <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
    <div style="color:#0b5575; margin-bottom: 1rem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank" >Reprehenderit</auro-hyperlink>
    </div>
      <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="" />
  </auro-banner>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
  <auro-banner roundedBorder flipped ratio="2:4">
    <div slot="content">
       <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
    <div style="color:#0b5575; margin-bottom: 1rem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank" >Reprehenderit</auro-hyperlink>
    </div>
      <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="" />
  </auro-banner>
  ```

</auro-accordion>

## Row

The following example illustrates a `<auro-banner>` custom element with the `row` variant which maintains the row format on mobile instead of the default stacking behavior.


<auro-twocolumn ratio="1:1">
  <div slot="left" class="exampleWrapper">
    <auro-banner row flipped ratio="3:5">
      <div slot="content">
        <auro-header level="2" display="400" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
      <div style="color:#0b5575; margin-bottom: 1rem">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      </div>
      <auro-background
      slot="graphic"
      height="200px"
      heightsm="200px"
      background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/1C2222E987A24E33B6E3977CDEFAA00F) center center/cover"
    />
    </auro-banner>
  </div>
</auro-twocolumn>


<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner row flipped ratio="3:5">
    <div slot="content">
      <auro-header level="2" display="400" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
    <div style="color:#0b5575; margin-bottom: 1rem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    </div>
    <auro-background
    slot="graphic"
    height="200px"
    heightsm="200px"
    background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/1C2222E987A24E33B6E3977CDEFAA00F) center center/cover"
  />
  </auro-banner>
  ```

</auro-accordion>

## Additional Examples

The examples below showcase current or former examples of how the `<auro-banner>` is being used in production to give further context on how to use the it.

### Credit card offer

The following examples showcases the `<auro-banner>` in a typical merchandising situation using `<auro-header>`, `<auro-icon>`, `<auro-hyperlink>` along with basic `html` markup. This one has a custom `ratio` of `8:17`.

  <auro-banner flipped ratio="8:17">
      <img slot="graphic" src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="" />
    <div slot="content">
     <auro-header level="6" display="100" margin="both" size="none"><strong>LIMITED TIME ONLINE OFFER</strong></auro-header>
     <auro-header level="2" display="700" margin="both" size="none" style="color:#0074CA"><strong style="font-size: 2.4rem;">BUY ONE</strong> ticket<auro-icon  category="terminal"  name="plane-side-fill"
  customColor  style="color: #01426A; margin-left:1rem"></auro-icon></auro-header>
     <auro-header level="2" display="700" margin="both" size="none" style="color:#00805D"><strong style="font-size: 2.4rem;">GET ONE</strong> for just the taxes & fees</auro-header>
    <div style="margin-bottom: .5rem">
      Plus, get a 40,000 bonus mile offer when you apply here.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank" >Apply now</auro-hyperlink>
    </div>
  </auro-banner>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner flipped ratio="8:17">
      <img slot="graphic" src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="" />
    <div slot="content">
     <auro-header level="6" display="100" margin="both" size="none"><strong>LIMITED TIME ONLINE OFFER</strong></auro-header>
     <auro-header level="2" display="700" margin="both" size="none" style="color:#0074CA"><strong style="font-size: 2.4rem;">BUY ONE</strong> ticket<auro-icon  category="terminal"  name="plane-side-fill"
  customColor  style="color: #01426A; margin-left:1rem"></auro-icon></auro-header>
     <auro-header level="2" display="700" margin="both" size="none" style="color:#00805D"><strong style="font-size: 2.4rem;">GET ONE</strong> for just the taxes & fees</auro-header>
    <div style="margin-bottom: .5rem">
      Plus, get a 40,000 bonus mile offer when you apply here.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank" >Apply now</auro-hyperlink>
    </div>
  </auro-banner>
```

</auro-accordion>



### Icon Grid

This example showcases a collection of `<auro-icon>` and a description using our `auro-threecolumn` component for formatting.

  <auro-banner ratio="3:2">
    <div slot="content">
      <auro-header level="2" color="var(--auro-color-brand-midnight-400)" display="300" margin="top" size="none"><auro-icon category="terminal" name="plane-side-fill" customcolor="" style="color: #01426A; margin-right:.2rem"></auro-icon>Ipsum dolor</auro-header>
      <auro-header level="2" color="var(--auro-color-brand-midnight-400)" display="700" margin="top" size="none" class="title">Quia possimus ea suscipit ipsam.</auro-header>
      <div style="margin-bottom: 1rem;">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate illum, possimus vitae quaerat alias assumenda magni accusamus minus autem odio debitis quisquam dolorem iste facere adipisci! Temporibus fugit consequatur odit!
      </div>
      <auro-threecolumn ratio="1:1:1" gap="24">
      <style>
        .slots {
          display:flex;
          align-items: center;
          padding-bottom:2rem;
        }
        .icon-style {
          max-width:100px;
        }
        .icon-copy {
          margin-top: .5rem;
        }
        @media (min-width:660px) {
        .slots {
          display:initial;
          padding-bottom:0;
        }
          .icon-copy {
            display: block;
          }
          .icon-style {
            max-width:100%;
          }
        }
      </style>
        <div class="slots" slot="left">
          <img class="icon-style" src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/5AECE5D9C8D54DB7BCE4395F224686E6">
          <div class="icon-copy">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="slots" slot="center">
          <img class="icon-style static-fly-partners" src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/4F4E766C4463477C80E84154DB1A1174">
          <div class="icon-copy">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="slots" slot="right">
          <img class="icon-style" src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/9EC95FB197C649C293D569F883E5843C">
          <div class="icon-copy">Lorem ipsum dolor sit amet.</div>
        </div>
      </auro-threecolumn>
    </div>
    <auro-background slot="graphic" height="450px" heightsm="422px" heightmd="450px" background="url('https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/mileage-plan/membership-benefits/redesign 2021/Earn_miles_600x500_ver2') center center/cover no-repeat"></auro-background>
  </auro-banner>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner ratio="3:2">
    <div slot="content">
      <auro-header level="2" color="var(--auro-color-brand-midnight-400)" display="300" margin="top" size="none"><auro-icon category="terminal" name="plane-side-fill" customcolor="" style="color: #01426A; margin-right:.2rem"></auro-icon>Ipsum dolor</auro-header>
      <auro-header level="2" color="var(--auro-color-brand-midnight-400)" display="700" margin="top" size="none" class="title">Quia possimus ea suscipit ipsam.</auro-header>
      <div style="margin-bottom: 1rem;">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate illum, possimus vitae quaerat alias assumenda magni accusamus minus autem odio debitis quisquam dolorem iste facere adipisci! Temporibus fugit consequatur odit!
      </div>
      <auro-threecolumn ratio="1:1:1" gap="24">
      <style>
        .slots {
          display:flex;
          align-items: center;
          padding-bottom:2rem;
        }
        .icon-style {
          max-width:100px;
        }
        .icon-copy {
          margin-top: .5rem;
        }
        @media (min-width:660px) {
        .slots {
          display:initial;
          padding-bottom:0;
        }
          .icon-copy {
            display: block;
          }
          .icon-style {
            max-width:100%;
          }
        }
      </style>
        <div class="slots" slot="left">
          <img class="icon-style" src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/5AECE5D9C8D54DB7BCE4395F224686E6">
          <div class="icon-copy">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="slots" slot="center">
          <img class="icon-style static-fly-partners" src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/4F4E766C4463477C80E84154DB1A1174">
          <div class="icon-copy">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="slots" slot="right">
          <img class="icon-style" src="https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/9EC95FB197C649C293D569F883E5843C">
          <div class="icon-copy">Lorem ipsum dolor sit amet.</div>
        </div>
      </auro-threecolumn>
    </div>
    <auro-background slot="graphic" height="450px" heightsm="422px" heightmd="450px" background="url('https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/mileage-plan/membership-benefits/redesign 2021/Earn_miles_600x500_ver2') center center/cover no-repeat"></auro-background>
  </auro-banner>
```

</auro-accordion>

### Flight Search page example
This example is used on the flight matrix page.

<auro-twocolumn ratio="2:1" gap="24">
  <auro-banner roundedBorder flipped ratio="3:5" slot="left">
  <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="Alaska Airlines Visa Signature card" style="max-width: 100%;">
  <div slot="content">
    <auro-header level="2" display="400" margin="both" size="none">SPECIAL OFFER FOR YOU</auro-header>
    <div style="font-size: .8rem; line-height: 1.25; margin: .25rem 0 .5rem;">
    Apply today and get a $200 statement credit offer plus a 30,000 bonus mile offer.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank">Apply now</auro-hyperlink>
  </div>
  </auro-banner>
</auro-twocolumn>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner roundedBorder flipped ratio="3:5" slot="left">
  <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="Alaska Airlines Visa Signature card" style="max-width: 100%;">
  <div slot="content">
    <auro-header level="2" display="400" margin="both" size="none">SPECIAL OFFER FOR YOU</auro-header>
    <div style="font-size: .8rem; line-height: 1.25; margin: .25rem 0 .5rem;">
    Apply today and get a $200 statement credit offer plus a 30,000 bonus mile offer.
    </div>
    <auro-hyperlink secondary cta href="#" target="_blank">Apply now</auro-hyperlink>
  </div>
</auro-banner>
```

</auro-accordion>

### Card Benefits

##### Example #1
This example combines a collection of `<auro-icon>` in a list showcasing the many benefits of our card.
<br>

 <auro-banner ratio="6:4">
  <auro-background
    slot="graphic"
    height="270px"
    heightsm="422px"
    heightmd="335px"
    background="url(https://images.unsplash.com/photo-1585541115073-0fd04faa7142?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) center center/cover"
  ><div class="imageWrapper">
    <style>
       .imageWrapper {
         display:flex;
         align-items: center;
          flex-direction:column;
          /* use the same value as height */
         min-height: 270px;
         /* if you want the CC to overlap the bottom on mobile otherwise delete the line below */
         justify-content: flex-end; /*adjust this as needed */
         margin-bottom:30px;
      }
      .imageWrapper img {
        height: auto;
        max-width: 180px;
        /* if you want the CC to overlap the bottom on mobile otherwise delete the line below */
        position: relative;
        top: 30px;
      }
      @media (min-width:660px) {
        .imageWrapper {
          /* use the same value as heightsm */
          min-height: 422px;
          /* if you want the CC to overlap the bottom on mobile but not on other screen sizes otherwise delete the line below */
          margin-bottom:0;
          justify-content: center; /*adjust this as needed */
        }
        .imageWrapper img {
          /* if you want the CC to overlap the bottom on mobile but not on other screen sizes otherwise delete the line below  */
          position: initial;
          top: 0;
      }
      }
      @media (min-width:1024px) {
      /* use the same value as heightmd */
        .imageWrapper {min-height: 355px}
      }
       @media (min-width:1232px) {
      /* use the same value as heightlg */
        .imageWrapper {min-height: 355px}
      }
    </style>
    <img src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature">
    </div>
  </auro-background>
    <div slot="content">
    <auro-header level="2" display="600" margin="both" size="none" class="title"> Get 40,000 Bonus Miles + Alaska's Famous Companion Fare&trade; offer. Plus,</auro-header>
<ul style="list-style: none;padding-left:0;margin:.5rem 0 0 0">
       <style>ul li {line-height:2rem; text-align:left;} ul li auro-icon {margin-right:.5rem; margin-left:-.35rem}</style>
        <li><auro-icon label="" emphasis="" category="in-flight" name="luggage"></auro-icon>First checked bag free for you and up to 6 guests on your reservation.</li>
        <li><auro-icon label="" emphasis="" category="interface" name="star-stroke"></auro-icon>Alaska's Famous Companion Fare™ every year.</li>
        <li><auro-icon label="" emphasis="" category="shop" name="shopping-bag"></auro-icon>3 miles for every $1 spent on eligible Alaska Airlines purchases.</li>
        <li><auro-icon label="" emphasis="" category="terminal" name="plane-diag-stroke"></auro-icon>20% back on Alaska Airlines inflight purchases.</li>
        <li><auro-icon label="" emphasis="" category="terminal" name="lounge"></auro-icon>50% off Lounge passes.</li>
    </ul>
    </div>
  </auro-banner>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-background
    slot="graphic"
    height="250px"
    heightsm="422px"
    heightmd="335px"
    background="url(https://images.unsplash.com/photo-1585541115073-0fd04faa7142?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) center center/cover"
  ><div class="imageWrapper">
    <style>
       .imageWrapper {
         display:flex;
         align-items: center;
          flex-direction:column;
          /* use the same value as height */
         min-height: 250px;
         /* if you want the CC to overlap the bottom on mobile otherwise delete the line below */
         justify-content: flex-end; /*adjust this as needed */
         margin-bottom:30px;
      }
      .imageWrapper img {
        height: auto;
        max-width: 180px;
        /* if you want the CC to overlap the bottom on mobile otherwise delete the line below */
        position: relative;
        top: 30px;
      }
      @media (min-width:660px) {
        .imageWrapper {
          /* use the same value as heightsm */
          min-height: 422px;
          /* if you want the CC to overlap the bottom on mobile but not on other screen sizes otherwise delete the line below */
          margin-bottom:0;
          justify-content: center; /*adjust this as needed */
        }
        .imageWrapper img {
          /* if you want the CC to overlap the bottom on mobile but not on other screen sizes otherwise delete the line below  */
          position: initial;
          top: 0;
      }
      }
      @media (min-width:1024px) {
      /* use the same value as heightmd */
        .imageWrapper {min-height: 355px}
      }
       @media (min-width:1232px) {
      /* use the same value as heightlg */
        .imageWrapper {min-height: 355px}
      }
    </style>
    <img src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature">
    </div>
  </auro-background>
    <div slot="content">
    <auro-header level="2" display="600" margin="both" size="none" class="title"> Get 40,000 Bonus Miles + Alaska's Famous Companion Fare&trade; offer. Plus,</auro-header>
<ul style="list-style: none;padding-left:0;margin:.5rem 0 0 0">
       <style>ul li {line-height:2rem; text-align:left;} ul li auro-icon {margin-right:.5rem; margin-left:-.35rem}</style>
        <li><auro-icon label="" emphasis="" category="in-flight" name="luggage"></auro-icon>First checked bag free for you and up to 6 guests on your reservation.</li>
        <li><auro-icon label="" emphasis="" category="interface" name="star-stroke"></auro-icon>Alaska's Famous Companion Fare™ every year.</li>
        <li><auro-icon label="" emphasis="" category="shop" name="shopping-bag"></auro-icon>3 miles for every $1 spent on eligible Alaska Airlines purchases.</li>
        <li><auro-icon label="" emphasis="" category="terminal" name="plane-diag-stroke"></auro-icon>20% back on Alaska Airlines inflight purchases.</li>
        <li><auro-icon label="" emphasis="" category="terminal" name="lounge"></auro-icon>50% off Lounge passes.</li>
    </ul>
    </div>
  </auro-banner>
```

</auro-accordion>

##### Example #2
The graphic slot can also include `<auro-hyperlink>` as well as an image, like in this example.

<auro-banner flipped ratio="4:6">

  <div slot="graphic" style="text-align:center; position:relative">
    <img src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" width="300px" style="margin-bottom: 1.5rem;">
    <auro-hyperlink secondary cta href="#" target="_blank">Apply now</auro-hyperlink>
  </div>
    <div slot="content">
      <auro-header level="2" display="600" margin="both" size="none" class="title"> Get 40,000 Bonus Miles + Alaska's Famous Companion Fare&trade; offer. Plus,</auro-header>
      <ul style="list-style: none;padding-left:0;margin:.5rem 0 0 0">
        <style>ul li {line-height:2rem; text-align:left;} ul li auro-icon {margin-right:.5rem; margin-left:-.35rem}</style>
          <li><auro-icon label="" emphasis="" category="in-flight" name="luggage"></auro-icon>First checked bag free for you and up to 6 guests on your reservation.</li>
          <li><auro-icon label="" emphasis="" category="interface" name="star-stroke"></auro-icon>Alaska's Famous Companion Fare™ every year.</li>
          <li><auro-icon label="" emphasis="" category="shop" name="shopping-bag"></auro-icon>3 miles for every $1 spent on eligible Alaska Airlines purchases.</li>
          <li><auro-icon label="" emphasis="" category="terminal" name="plane-diag-stroke"></auro-icon>20% back on Alaska Airlines inflight purchases.</li>
          <li><auro-icon label="" emphasis="" category="terminal" name="lounge"></auro-icon>50% off Lounge passes.</li>
      </ul>
    </div>
  </auro-banner>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner flipped ratio="4:6">

  <div slot="graphic" style="text-align:center; position:relative">
    <img src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" width="300px" style="margin-bottom: 1.5rem;">
    <auro-hyperlink secondary cta href="#" target="_blank">Apply now</auro-hyperlink>
  </div>
    <div slot="content">
      <auro-header level="2" display="600" margin="both" size="none" class="title"> Get 40,000 Bonus Miles + Alaska's Famous Companion Fare&trade; offer. Plus,</auro-header>
      <ul style="list-style: none;padding-left:0;margin:.5rem 0 0 0">
        <style>ul li {line-height:2rem; text-align:left;} ul li auro-icon {margin-right:.5rem; margin-left:-.35rem}</style>
          <li><auro-icon label="" emphasis="" category="in-flight" name="luggage"></auro-icon>First checked bag free for you and up to 6 guests on your reservation.</li>
          <li><auro-icon label="" emphasis="" category="interface" name="star-stroke"></auro-icon>Alaska's Famous Companion Fare™ every year.</li>
          <li><auro-icon label="" emphasis="" category="shop" name="shopping-bag"></auro-icon>3 miles for every $1 spent on eligible Alaska Airlines purchases.</li>
          <li><auro-icon label="" emphasis="" category="terminal" name="plane-diag-stroke"></auro-icon>20% back on Alaska Airlines inflight purchases.</li>
          <li><auro-icon label="" emphasis="" category="terminal" name="lounge"></auro-icon>50% off Lounge passes.</li>
      </ul>
    </div>
  </auro-banner>
```

</auro-accordion>

### Hero

In these examples the `<auro-banner>` can be used along side a set of page navigation links often at the top of a hub page to highlight a main feature or bit of information.

##### oneworld hub page

<section class="flex-container">
  <div class="flex-column col1"><ul class="PageNav"><li><auro-hyperlink relative="true" href="#MemberAirlines">Members</auro-hyperlink></li><li><auro-hyperlink relative="true" href="#Benefits">Benefits</auro-hyperlink></li><li><auro-hyperlink relative="true" href="#RoundtheWorldfares">Round the World fares</auro-hyperlink></li><li><auro-hyperlink relative="true" href="#SeemlessTravel">Seamless travel</auro-hyperlink></li></ul></div>
  <div class="flex-column col2">
    <auro-banner>
      <div slot="content">
        <auro-header level="2" color="var(--auro-color-brand-midnight-400)" display="300" margin="top" size="none"><b>one</b>world<sup>&reg;</sup> Alliance</span></auro-header>
        <auro-header level="2" color="var(--auro-color-brand-midnight-400)" display="600" margin="top" size="none" class="title">14 global airlines.<br>One bright alliance.</auro-header>
        <div style="margin-bottom: 1rem">
          Say hi to <b>one</b>world, an alliance of the world’s leading airlines providing the highest level of service and convenience across more than 1,000 destinations worldwide.
        </div>
        <auro-hyperlink slot="action" href="https://www.oneworld.com/" target="_blank" cta="true" secondary="true" nav="true">About <strong>one</strong>world</auro-hyperlink>
      </div>
      <div slot="graphic">
        <auro-background height="250px" heightsm="422px" heightmd="335px" background="url(https://sitecore-prod-cd-westus2.azurewebsites.net/-/media/Images/pages/oneworld-hub/Hero-S.png) center center/cover" b