eui documentation
  1. Components
  2. EuiBannerComponent

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

  • 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

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

Inputs
HostBindings
Accessors

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

class
Type : string

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""