eui documentation
  1. Components
  2. EuiContentCardHeaderSubtitleComponent

File

packages/components/eui-content-card/eui-content-card-header/eui-content-card-header-subtitle.ts

Description

Container for secondary title text displayed below the main title. Used for additional context or description.

Basic Subtitle

Example :
<eui-content-card-header-subtitle>
    Additional information about the card
</eui-content-card-header-subtitle>

With Formatting

Example :
<eui-content-card-header-subtitle>
    <span class="eui-u-text-muted">Last updated: 2 hours ago</span>
</eui-content-card-header-subtitle>

Accessibility

  • Keep subtitle text concise and relevant
  • Ensure sufficient color contrast for readability
  • Use semantic markup when appropriate

Notes

  • Displayed directly below the title with reduced visual prominence
  • Optional component - only include when additional context is needed
  • Styled with secondary typography for visual hierarchy
  • Should complement, not duplicate, the title

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-content-card-header-subtitle
template 
<ng-content/>
styleUrl ./eui-content-card-header-subtitle.scss

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-content-card-header-subtitle'

Binds the class to the component.

Properties

string
Type : string
Default value : 'eui-content-card-header-subtitle'
Decorators :
@HostBinding('class')

Binds the class to the component.

results matching ""

    No results matching ""