File

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

Description

Footer section for custom dashboard cards, typically containing action links, buttons, or supplementary information. Provides a consistent bottom section for card actions and metadata.

Action Link

<eui-dashboard-card-content-footer>
  <a class="eui-u-text-link" href="/details">View details</a>
</eui-dashboard-card-content-footer>

Multiple Actions

<eui-dashboard-card-content-footer>
  <div class="eui-u-flex eui-u-justify-between">
    <eui-icon-button icon="eui-refresh" size="s" aria-label="Refresh"/>
    <a class="eui-u-text-link" href="/export">Export data</a>
  </div>
</eui-dashboard-card-content-footer>

Accessibility

• Ensure links and buttons have descriptive text or aria-labels
• Maintain sufficient color contrast for footer content
• Use semantic elements for actions (buttons, links)

Notes

• Optional footer section for card actions
• Automatically positioned at bottom of card
• Supports any content: links, buttons, text, or custom components
• Use flex utilities for multi-element layouts

<ng-content />