### 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

- headerStartComponent
- string

###### HostBindings

- class

### 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 ""