eui documentation
  1. Components
  2. EuiDashboardCardContentComponent

File

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

Description

Custom content container for EuiDashboardCard that enables fully customized card layouts. Use this when the default card structure doesn't meet your needs and you want complete control over the card's internal structure with header, body, and footer sections.

Complete Custom Card

Example :
<eui-dashboard-card>
  <eui-dashboard-card-content>
    <eui-dashboard-card-content-header>
      <eui-dashboard-card-content-header-icon icon="chart-line:regular"/>
      <eui-dashboard-card-content-header-title>
        Sales Overview
      </eui-dashboard-card-content-header-title>
      <eui-dashboard-card-content-header-action>
        <eui-icon-button icon="eui-ellipsis-vertical" size="s"/>
      </eui-dashboard-card-content-header-action>
    </eui-dashboard-card-content-header>
    <eui-dashboard-card-content-body>
      <div class="eui-u-f-2xl-bold">$24,500</div>
      <div class="eui-u-flex">
        <eui-icon-svg icon="arrow-up:regular" fillColor="success" size="xs"/>
        <span class="eui-u-c-s-success">+12% vs last month</span>
      </div>
    </eui-dashboard-card-content-body>
    <eui-dashboard-card-content-footer>
      <a class="eui-u-text-link" href="/reports">View full report</a>
    </eui-dashboard-card-content-footer>
  </eui-dashboard-card-content>
</eui-dashboard-card>

Accessibility

  • Maintains semantic structure with header, body, and footer sections
  • Ensure interactive elements within have proper labels
  • Use heading elements in title section for proper document outline

Notes

  • Provides complete flexibility for complex dashboard card layouts
  • Combine with sub-components for structured content organization
  • Use when default card props (label, subLabel, etc.) are insufficient
  • Supports all dashboard card variants and sizes via parent component

Metadata

selector eui-dashboard-card-content
templateUrl ./eui-dashboard-card-content.html
styleUrl ./eui-dashboard-card-content.scss

Index

Properties
HostBindings

HostBindings

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

CSS class applied to the host element

Properties

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

CSS class applied to the host element

results matching ""

    No results matching ""