eui documentation
  1. Components
  2. EuiContentCardHeaderMetadataComponent

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
HostBindings

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