eui documentation
  1. Components
  2. EuiBannerDescriptionComponent

File

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

Description

Content projection component for displaying descriptive text within eui-banner. Provides consistent typography and styling for banner description content. Must be used as a child of eui-banner component. Accepts text, paragraphs, or inline elements through content projection.

Example :
<eui-banner imageUrl="image.jpg">
  <eui-banner-title>Innovation Hub</eui-banner-title>
  <eui-banner-description>
    Explore cutting-edge solutions and collaborate with experts.
  </eui-banner-description>
</eui-banner>

Accessibility

  • Description text is readable by screen readers after title
  • Provides additional context about banner content
  • Ensure sufficient contrast with background images

Notes

  • Must be direct child of eui-banner component
  • Typically placed after eui-banner-title
  • Styled as secondary/body text
  • Automatically adapts to banner size variants
  • Works with euiInverse for light text on dark backgrounds

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-banner-description
template 
<ng-content/>
styleUrl ./eui-banner-description.scss

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-banner-description'

Binds the class to the component.

Properties

string
Type : string
Default value : 'eui-banner-description'
Decorators :
@HostBinding('class')

Binds the class to the component.

results matching ""

    No results matching ""