eui documentation
  1. Components
  2. EuiContentCardHeaderStartComponent

File

packages/components/eui-content-card/eui-content-card-header/eui-content-card-header-start.ts

Description

Container for content placed at the start (left side) of the card header. Typically used for status indicators, badges, or icons.

With Status Chip

Example :
<eui-content-card-header-start>
    <eui-chip euiSizeS>Active</eui-chip>
</eui-content-card-header-start>

With Icon

Example :
<eui-content-card-header-start>
    <eui-icon-svg icon="document" size="m"/>
</eui-content-card-header-start>

Accessibility

  • Ensure status indicators have appropriate text or ARIA labels
  • Icons should have descriptive labels when conveying important information

Notes

  • Positioned at the start of the header before the title
  • Commonly used for visual status indicators or categorization
  • Content is automatically aligned and spaced

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-content-card-header-start
template 
<ng-content/>
styleUrl ./eui-content-card-header-start.scss

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-content-card-header-start'

Binds the class to the component.

Properties

string
Type : string
Default value : 'eui-content-card-header-start'
Decorators :
@HostBinding('class')

Binds the class to the component.

results matching ""

    No results matching ""