# auro-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 details. ### Properties & Attributes | Properties | Attributes | Modifiers | Type | Default | Description | | ------------- | ------------- | --------- | ---------------------- | --------- | --------------------------------------------------------------------------------------------------- | | alignLeft | alignLeft | | boolean | | Use to align text to the left side of the banner | | alignRight | alignRight | | boolean | | Use to align text to the right side of the banner | | appearance | appearance | | `default` \| `inverse` | `default` | Defines whether the component will be on lighter or darker backgrounds | | billboard | billboard | | boolean | | Use to enable billboard style configuration | | hero | hero | | boolean | | Use to enable hero style configuration | | iconbg | iconbg | | string | | Use in conjunction with the iconic variant to specify the background color of the icon | | iconic | iconic | | boolean | | Used similarly to the `hero` variant, but adds an icon slot and removes the display image on mobile | | marquee | marquee | | boolean | | Use to enable marquee style configuration | | onDark | onDark | | boolean | | DEPRECATED - use `appearance="inverse"` instead. | | roundedBorder | roundedBorder | | boolean | | Use to enable rounded border style configuration | | slim | slim | | boolean | | Use to enable slimmer padding to the default banner | | solid | solid | | boolean | | Use to enable a solid background color as opposed to a transparent background | ### Methods | Name | Parameters | Return | Description | | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- | | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. | ### Slots | Name | Description | | ------------ | ----------------------------------------------- | | action | call to action | | contentImage | image placement | | description | main body of content | | disclaimer | disclaimer copy | | displayImage | placement for `` or `` elements | | prefix | placement for smaller text above title | | title | placement for header | ## Property & Attribute Examples ### Billboard The `billboard` property features a single configuration using the `displayImage`, `contentImage`, `description`, `action` and `disclaimer` slots for structured content placement. This is the most common use case for the `` component.
Random insert

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.

More info
See code ```html Random insert

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.

More info ``` ### Hero The following example illustrates the `hero` template style. This example also illustrates the use of the `prefix` slot.
Duis aute irure dolor Duis aute irure dolor.
Excepteur sint occaecat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More info
See code ```html Duis aute irure dolor Duis aute irure dolor.
Excepteur sint occaecat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More info ``` ### Iconic The `iconic` template style hides the `displayImage` on small screen sizes and only shows the icon. Use the `iconbg` attribute to add a background color to the icon container.
Lorem ipsum title You can add multiple auro-header's here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.

See code ```html Lorem ipsum title You can add multiple auro-header's here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.

``` ### Marquee The following example illustrates the `marquee` template style. It also supports the `slim` and `appearance="inverse"` attributes.
Duis aute irure dolor Duis aute irure dolor.
Excepteur sint occaecat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More info
See code ```html Duis aute irure dolor Duis aute irure dolor.
Excepteur sint occaecat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More info ``` ### Solid Marquee The following example illustrates a `` custom element with the `marquee solid` template style. With this configuration, `appearance="inverse"` is implied. For content not wrapped in a designated slot, it is required to set the `appearance="inverse"` attribute manually. This is **not** controlled by the `` element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More info
See code ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More info ``` ### Rounded Border The `roundedBorder` variant style adds a border with rounded corners around the banner content. With this configuration, no `displayImage` is used. Instead only the `contentImage` is used and the rest of the content is displayed in a row.
Prefix - Limited Time Title - Irure dolor.

Description - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

* Disclaimer - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More info
See code ```html Prefix - Limited Time Title - Irure dolor.

Description - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

* Disclaimer - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More info ``` ## Slot Examples #### Display Image Slot for Background The `displayImage` slot is configured to work with the HTML [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element. ```html ``` This allows the editor the utmost in image flexibility for cropped images placed at different breakpoints. A slotted `` element is the default image shown when less than the first defined breakpoint. By default `` elements are `inline` elements and will add a few pixels of space below the image. To counter this, either set `display: block` on the `` element, or add this [WCSS pre-defined selector](https://alaskaairlines.github.io/WebCoreStyleSheets/#core-css-#{$sym}#{$prefix}picture#{$scope}) to your project.

## Common Usage Patterns & Functional Examples #### Billboard / slim / alignRight / appearance The following example illustrates a series of additional API options available to the `` element. In this example, this shows how a user can augment the `billboard` theme of the ``.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn more
See code ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn more ``` #### Billboard / slim / alignLeft / appearance The following example illustrates an option to left align the text `alignLeft` along with `slim` to reduce the padding and `appearance="inverse"` to change the text to white.
Beverages and cocktails

Enjoy soft drinks, fresh Starbucks® coffee – including lattes and cappuccinos, and Teavana® tea while you relax. Or try our famous Bloody Mary.

More info
See code ```html Beverages and cocktails

Enjoy soft drinks, fresh Starbucks® coffee – including lattes and cappuccinos, and Teavana® tea while you relax. Or try our famous Bloody Mary.

More info ``` ## Restyle Component with CSS Variables The component may be restyled by changing the values of the following token(s). ```scss @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; :host { --ds-auro-banner-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default}); --ds-auro-banner-disclaimer-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted}); --ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-accent1, #{v.$ds-basic-color-texticon-accent1}); --ds-auro-banner-icon-container-color: var(--ds-basic-color-surface-neutral-medium, #{v.$ds-basic-color-surface-neutral-medium}); --ds-auro-banner-wrapper-container-color: var(--ds-basic-color-surface-inverse, #{v.$ds-basic-color-surface-inverse}); --ds-auro-banner-wrapper-border-color: var(--ds-basic-color-border-default, #{v.$ds-basic-color-border-default}); } ```