CardFooter
A container for card elements at the end of a card.
Overview
CardFooter is a subcomponent of Card that can provide accessibility information to the browser and some flexibility with card layouts.
Examples
Basic Usage
CardFooter must be a child of a Card.
CardFooter as a UI utility
Sometimes, we want the cards in a group of cards to all have the same height (in which case, we apply the matchHeight prop to the Card). However, some cards may have less content than its neighbors, leading to extra white space at the bottom of the card. Sometimes this is fine, but if we want to align some content to the bottom across cards, that's where the CardFooter comes in handy.
Cards without CardFooter
The Card on the left has shorter text length than the card on the right, so the button in the left card follows to the text above it, leaving a large gap below it.
Unlock features to enhance instruction
Foster a collaborative learning environment with our instructional routines.
Use specialized support for diverse learning needs.
Support successful curriculum implementation
Discover a roadmap to plan curriculum implementation in the classroom.
Access resources for ongoing educator support and reflection opportunities.
Cards with CardFooter
If the button is wrapped in a CardFooter, the parent Card component will receive an additional class, integral-card--has-footer, which will style the card such that the button will now align to the bottom of the card.
Props
Prop
Type
Import
import { Card, CardFooter } from '@im/integral/components/styled';