CardFooter is used to append a visually distinct section to Card.
Examples #
Import Syntax #
import Card, { CardFooter } from 'mineral-ui/Card';Note
Cards normally occupy the full available width of their container. The Cards here are width-constrained for illustration purposes.
Basic Usage #
CardFooter is used to add an extension to a Card. It can contain any children, but is best used with CardActions and CardBlock.
Footer Title Only
Footer Title
<DemoLayout> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="Footer Title Only" /> </Card> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter> <CardActions> <Button minimal>Button 1</Button> <Button primary>Button 2</Button> </CardActions> </CardFooter> </Card> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="Footer Title"> <CardBlock>{loremIpsum}</CardBlock> <CardActions> <Button minimal>Button 1</Button> <Button primary>Button 2</Button> </CardActions> </CardFooter> </Card> </DemoLayout>
Expandable Footer #
Set expandable to true to allow the user to expand/collapse
CardFooter. Note that a title must be provided to expandable CardFooters.
Collapsed by Default
Expanded by Default
<DemoLayout> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="Collapsed by Default" expandable> <CardBlock>{loremIpsum}</CardBlock> </CardFooter> </Card> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="Expanded by Default" expandable defaultIsOpen> <CardBlock>{loremIpsum}</CardBlock> </CardFooter> </Card> </DemoLayout>
Controlled #
CardFooter controls its own state by default,
and can optionally be managed by the application as a controlled component through the isOpen attribute.
Callbacks for onOpen and onClose are also provided.
Footer Title
class App extends Component { constructor(props) { super(props); this.state = { isOpen: false }; this.onOpen = this.onOpen.bind(this); this.onClose = this.onClose.bind(this); this.toggle = this.toggle.bind(this); } onOpen(event) { this.setState({ isOpen: true }); } onClose(event) { this.setState({ isOpen: false }); } toggle(event) { if (this.state.isOpen) { this.onClose(event); } else { this.onOpen(event); } } render() { const label = this.state.isOpen ? 'Collapse CardFooter' : 'Expand CardFooter'; return ( <DemoLayout ref={node => { this.demoLayout = node }}> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter expandable isOpen={this.state.isOpen} onOpen={this.onOpen} onClose={this.onClose} title="Footer Title"> <CardBlock>{loremIpsum}</CardBlock> </CardFooter> </Card> <Button onClick={this.toggle}>{label}</Button> </DemoLayout> ); } }
Available Variants #
CardFooter is available in a few variants. Be sure to use the appropriate variant for your intent.
Success Footer Title
Warning Footer Title
Danger Footer Title
<DemoLayout> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="Success Footer Title" variant="success"> <CardBlock>{loremIpsum}</CardBlock> </CardFooter> </Card> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="Warning Footer Title" variant="warning"> <CardBlock>{loremIpsum}</CardBlock> </CardFooter> </Card> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="Danger Footer Title" variant="danger"> <CardBlock>{loremIpsum}</CardBlock> </CardFooter> </Card> </DemoLayout>
Bidirectionality #
CardFooter reverses its alignment when the direction theme
variable is set to rtl (right-to-left).
تذييل العنوان
<DemoLayout dir="rtl"> <ThemeProvider theme={{ direction: 'rtl' }}> <Card> <CardBlock>{loremIpsum}</CardBlock> <CardFooter title="تذييل العنوان" expandable triggerTitle={isOpen => isOpen ? 'تصغير المحتويات' : 'قم بتوسيع المحتويات'}> <CardBlock>{loremIpsum}</CardBlock> </CardFooter> </Card> </ThemeProvider> </DemoLayout>
API & Theme #
CardFooter Props #
The CardFooter component takes the following React props.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React$Node | required | Content of CardFooter |
| defaultIsOpen | boolean | If | |
| expandable | boolean | Display a trigger to expand/collapse CardFooter contents ( | |
| isOpen | boolean | For use with controlled components, in which the app manages CardFooter state | |
| onClose | If | ||
| onOpen | If | ||
| title | string | React$Element<*> | Title of the footer | |
| triggerTitle | If | ||
| variant | 'danger' | 'success' | 'warning' | Available variants |
CardFooter Theme Variables #
These variables can be used as hooks to override this component's
style at either a
local
or global
level. The theme referenced below is whatever theme is available
from props to the instance of this component.
| Variable | Value |
|---|---|
| CardFooter_backgroundColor | theme.well_backgroundColor |
| CardFooter_borderColor | theme.borderColor |
| CardFooterRow_marginVertical | theme.space_stack_sm |
| CardFooterRow_marginVerticalLast | theme.space_stack_md |
| CardFooterTitle_color | theme.h5_color |
| CardFooterTitle_fontSize | theme.h5_fontSize |
| CardFooterTitle_fontWeight | theme.h5_fontWeight |
Usage #
Best Practices #
Use "Title Case" for your footer title.
Card Title
Card Footer Title
Use the appropriate variant for your intent.
Card Title
Ready
Don't use a variant that differs from intent, as this will cause confusion.
Card Title
Available
Don't put too much in a CardFooter, even if it's expandable. CardFooter content should be as brief as possible.
Card Title
Card Footer Title
