# EuiBannerComponent

**Type:** component



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
```html
<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
```html
<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
```html
<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
- No ARIA landmark role assigned; banner is a visual component
- 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


**Selector:** `eui-banner`

## Inputs
- **e2eAttr**: `string` - Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element.
- **euiInverse**: `boolean` - Applies inverse color scheme to the banner. When true, uses light text on dark background for better contrast with images.
- **euiPositionCenter**: `boolean` - Positions the banner content at the center of the banner area. When true, vertically centers content within the banner.
- **euiPositionTop**: `boolean` - Positions the banner content at the top of the banner area. When true, aligns content to the top with appropriate spacing.
- **imageUrl**: `string` - URL path to the banner background image. When provided, displays the image as the banner background. Optional.
- **isVideoBanner**: `boolean` - Enables video banner mode for displaying video backgrounds. When true, configures banner to support video content instead of static images.
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiOutline**: `any` - From host directive: #[[file:BaseStatesDirective.md]]