eui documentation
  1. Components
  2. EuiBannerTitleComponent

File

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

Description

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

Example :
<eui-banner imageUrl="image.jpg">
  <eui-banner-title>Welcome to Our Platform</eui-banner-title>
  <eui-banner-description>Start your journey today</eui-banner-description>
</eui-banner>

Accessibility

  • Title text is readable by screen readers in natural order
  • Use concise, descriptive titles that convey banner purpose
  • Ensure sufficient contrast with background when using images

Notes

  • Must be direct child of eui-banner component
  • Styled as prominent heading text
  • Automatically adapts to banner size variants
  • Works with euiInverse for light text on dark backgrounds

Metadata

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

Index

Properties
HostBindings

HostBindings

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

Binds the class to the component.

Properties

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

Binds the class to the component.

results matching ""

    No results matching ""