eui documentation
  1. Components
  2. EuiContentCardFooterComponent

File

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

Description

Container for footer content at the bottom of the card. Typically used for actions, links, or supplementary information.

Action Buttons

Example :
<eui-content-card-footer>
    <eui-button>View Details</eui-button>
    <eui-button euiSecondary>Cancel</eui-button>
</eui-content-card-footer>

Links

Example :
<eui-content-card-footer>
    <a href="/details" class="eui-u-text-link">Read more</a>
</eui-content-card-footer>

Mixed Content

Example :
<eui-content-card-footer>
    <div class="eui-u-flex eui-u-flex-justify-between">
        <span class="eui-u-text-muted">Last updated: 2 hours ago</span>
        <eui-button euiSizeS>Edit</eui-button>
    </div>
</eui-content-card-footer>

Accessibility

  • Ensure all interactive elements are keyboard accessible
  • Provide clear labels for all actions
  • Use appropriate button types (button vs link)
  • Maintain logical tab order

Notes

  • Positioned at the bottom of the card with visual separation
  • Optional component - only include when actions or additional info needed
  • Commonly used for primary/secondary actions
  • Automatically styled with appropriate spacing and borders

Metadata

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

Index

Properties
HostBindings

HostBindings

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

Binds the class to the component.

Properties

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

Binds the class to the component.

results matching ""

    No results matching ""