eui documentation
  1. Components
  2. EuiContentCardHeaderSubmetadataComponent

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
HostBindings

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