eui documentation
  1. Components
  2. EuiDashboardCardContentHeaderTitleComponent

File

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

Description

Title component for dashboard card headers, displaying the primary heading or label for the card. Automatically styled and positioned within the header layout.

Basic Title

Example :
<eui-dashboard-card-content-header-title>
  Revenue Overview
</eui-dashboard-card-content-header-title>

With Semantic Heading

Example :
<eui-dashboard-card-content-header-title>
  <h3>Active Users</h3>
</eui-dashboard-card-content-header-title>

Accessibility

  • Use semantic heading elements (h2, h3, etc.) for proper document structure
  • Ensure heading level matches page hierarchy
  • Title provides context for card content

Notes

  • Use within eui-dashboard-card-content-header component
  • Grows to fill available space between icon and action
  • Supports any content but typically contains text or headings
  • Text automatically truncates if too long

Metadata

selector eui-dashboard-card-content-header-title
template 
<ng-content />
styleUrl ./eui-dashboard-card-content-header-title.scss

Index

Properties
HostBindings

HostBindings

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

CSS class applied to the host element

Properties

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

CSS class applied to the host element

results matching ""

    No results matching ""