### File

`packages/components/eui-content-card/eui-content-card-header/eui-content-card-header-metadata.ts`

### Description

Container for primary metadata information displayed below the subtitle. Used for key details like dates, authors, or categories.

### Simple Metadata

Example :

    <eui-content-card-header-metadata>
        Created: January 26, 2024
    </eui-content-card-header-metadata>

### Multiple Metadata Items

Example :

    <eui-content-card-header-metadata>
        Author: John Doe | Category: Research | Status: Published
    </eui-content-card-header-metadata>

### With Semantic Markup

Example :

    <eui-content-card-header-metadata>
        <time datetime="2024-01-26">January 26, 2024</time> |
        <span>5 min read</span>
    </eui-content-card-header-metadata>

### Accessibility

- Use semantic HTML elements like `<time>` for dates
- Ensure metadata is meaningful and not purely decorative
- Maintain sufficient color contrast

### Notes

- Displayed below subtitle with reduced visual weight
- Use for factual information about the card content
- Separate multiple items with visual dividers (e.g., pipes)
- Keep concise to maintain scannability

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-content-card-header-metadata`

template

    <ng-content/>

styleUrl | `./eui-content-card-header-metadata.scss`

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-content-card-header-metadata'`
Binds the class to the component.

### Properties

string
Type : `string`
Default value : `'eui-content-card-header-metadata'`
Decorators : `@HostBinding('class')`
Binds the class to the component.

# results matching ""

# No results matching ""