### File

`packages/components/eui-banner/eui-banner.component.ts`

### Description

Banner component for displaying prominent content sections with images or videos across the full width of a page. Provides flexible positioning options (top, center, bottom) and supports inverse color schemes. Can display static images or video backgrounds with content overlay. Supports size variants (S, M, L) and outline styling through `BaseStatesDirective`.

#### Basic banner with image

Example :

    <eui-banner imageUrl="https://example.com/image.jpg">
      <eui-banner-title>Welcome</eui-banner-title>
      <eui-banner-description>Discover our services</eui-banner-description>
    </eui-banner>

#### Banner with CTA and positioning

Example :

    <eui-banner imageUrl="image.jpg" [euiPositionCenter]="true" [euiInverse]="true">
      <eui-banner-title>Get Started</eui-banner-title>
      <eui-banner-description>Join us today</eui-banner-description>
      <eui-banner-cta>
        <button euiButton euiCTAButton>Sign Up</button>
      </eui-banner-cta>
    </eui-banner>

#### Video banner

Example :

    <eui-banner [isVideoBanner]="true" euiSizeL>
      <eui-banner-video>
        <video autoplay loop muted>
          <source src="video.mp4" type="video/mp4">
        </video>
      </eui-banner-video>
      <eui-banner-title>Innovation</eui-banner-title>
    </eui-banner>

### Accessibility

- Uses role="section" for semantic landmark identification
- Ensure banner images have meaningful content or are decorative
- Use euiInverse for better text contrast on dark images
- Video content should include captions when containing important information
- CTA buttons should have descriptive labels

### Notes

- Size variants: euiSizeS, euiSizeM (default), euiSizeL control banner height
- Position options: euiPositionTop, euiPositionCenter (default is bottom)
- euiInverse applies light text on dark background for better image contrast
- imageUrl displays static background image
- isVideoBanner enables video background mode, use with eui-banner-video
- euiOutline adds border outline styling
- Content is overlaid on background image/video
- Typically contains eui-banner-title, eui-banner-description, and optionally eui-banner-cta

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiSizeS euiSizeM euiSizeL euiSizeVariant euiOutline
selector | `eui-banner`
templateUrl | `./eui-banner.component.html`
styleUrl | `./eui-banner.scss`

### Index

###### Properties

- role

###### Inputs

- e2eAttr
- euiInverse
- euiPositionCenter
- euiPositionTop
- imageUrl
- isVideoBanner

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-banner'`
Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element.

euiInverse
Type : `boolean`
Default value : `false`
Applies inverse color scheme to the banner. When true, uses light text on dark background for better contrast with images.

euiPositionCenter
Type : `boolean`
Default value : `false`
Positions the banner content at the center of the banner area. When true, vertically centers content within the banner.

euiPositionTop
Type : `boolean`
Default value : `false`
Positions the banner content at the top of the banner area. When true, aligns content to the top with appropriate spacing.

imageUrl
Type : `string`
URL path to the banner background image. When provided, displays the image as the banner background. Optional.

isVideoBanner
Type : `boolean`
Default value : `false`
Enables video banner mode for displaying video backgrounds. When true, configures banner to support video content instead of static images.

### HostBindings

attr.role
Type : `string`
Default value : `'section'`

class
Type : `string`

### Properties

role
Type : `string`
Default value : `'section'`
Decorators : `@HostBinding('attr.role')`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""