eui documentation
  1. Components
  2. EuiContentCardHeaderComponent

File

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

Description

Container component for the card header section. Supports title, subtitle, metadata, and action areas. Automatically integrates with parent card's collapsible functionality.

Basic Header

Example :
<eui-content-card-header>
    <eui-content-card-header-title>Card Title</eui-content-card-header-title>
    <eui-content-card-header-subtitle>Subtitle text</eui-content-card-header-subtitle>
</eui-content-card-header>

Complete Header with All Sections

Example :
<eui-content-card-header>
    <eui-content-card-header-start>
        <eui-chip euiSizeS>Status</eui-chip>
    </eui-content-card-header-start>
    <eui-content-card-header-title>
        <a href="#" class="eui-u-text-link">Linked Title</a>
    </eui-content-card-header-title>
    <eui-content-card-header-subtitle>Secondary information</eui-content-card-header-subtitle>
    <eui-content-card-header-metadata>Created: 2024-01-26</eui-content-card-header-metadata>
    <eui-content-card-header-end>
        <eui-icon-button icon="eui-ellipsis-vertical" size="s"/>
    </eui-content-card-header-end>
</eui-content-card-header>

Accessibility

  • Use semantic heading elements within title component for proper document outline
  • Ensure links in titles have descriptive text
  • Action buttons should have accessible labels
  • Metadata should be marked up appropriately (e.g., <time> for dates)

Notes

  • Header layout is flexible and adapts to included child components
  • Start and end sections are optional for additional content placement
  • Automatically handles collapse toggle when parent card is collapsible
  • Supports multiple metadata lines for complex information display

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-content-card-header
imports NgTemplateOutlet EUI_ICON_BUTTON_EXPANDER
templateUrl ./eui-content-card-header.component.html
styleUrl ./eui-content-card-header.scss

Index

Properties
HostBindings

HostBindings

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

Binds the class to the component.

Properties

headerStartComponent
Type : QueryList<EuiContentCardHeaderStartComponent>
Decorators :
@ContentChild(undefined, {static: false})
string
Type : string
Default value : 'eui-content-card-header'
Decorators :
@HostBinding('class')

Binds the class to the component.

results matching ""

    No results matching ""