eui documentation
  1. Components
  2. EuiContentCardHeaderTitleComponent

File

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

Description

Container for the main title text of the card. Supports plain text, links, or custom HTML content.

Plain Text Title

Example :
<eui-content-card-header-title>
    Card Title
</eui-content-card-header-title>

Linked Title

Example :
<eui-content-card-header-title>
    <a href="/details" class="eui-u-text-link">Clickable Card Title</a>
</eui-content-card-header-title>

With Semantic Heading

Example :
<eui-content-card-header-title>
    <h3>Semantic Title</h3>
</eui-content-card-header-title>

Accessibility

  • Use appropriate heading levels (h2-h6) based on document structure
  • Ensure titles are descriptive and meaningful
  • Links should clearly indicate their destination
  • Avoid generic text like "Click here"

Notes

  • Primary heading for the card content
  • Styled with appropriate typography for prominence
  • Can contain interactive elements like links
  • Should be concise and descriptive

Metadata

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

Index

Properties
HostBindings

HostBindings

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

Binds the class to the component.

Properties

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

Binds the class to the component.

results matching ""

    No results matching ""