### 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

- string

###### HostBindings

- class

### 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 ""