### File

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

### Description

Container for secondary metadata information displayed below the primary metadata. Used for supplementary details like ratings, statistics, or additional context.

### Rating Display

Example :

    <eui-content-card-header-submetadata>
        <span class="eui-u-flex eui-u-flex-gap-2xs">
            <eui-icon-svg icon="star:fill" fillColor="primary" size="s"/>
            <strong>4.8</strong> (156 reviews)
        </span>
    </eui-content-card-header-submetadata>

### Statistics

Example :

    <eui-content-card-header-submetadata>
        1.2K views • 45 comments
    </eui-content-card-header-submetadata>

### Accessibility

- Provide text alternatives for icon-only information
- Use `aria-label` when icons convey meaning
- Ensure color is not the only means of conveying information

### Notes

- Displayed below primary metadata with minimal visual weight
- Use for less critical but useful information
- Often includes icons or visual indicators
- Should not duplicate information from other header sections

### Metadata

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

template

    <ng-content/>

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

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

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

### Properties

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

# results matching ""

# No results matching ""