Card
EuiCard is a content-oriented component built on top of EuiPanel. Be sure to check out the guidelines for properly nesting panels.
Basic card
At its core an EuiCard should contain a title,description, and an icon.
You can make the whole card clickable by giving it an onClick handler or href.
For accessibility and heading hierarchy, a card's title element is a span by default.
However, this can be changed via the titleElement prop without altering the visual size.
Layout
Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may want the icon
to be to the left of the content. In this case, add the prop layout="horizontal".
Works best when the icon is size xl.
Horizontal layouts do not work with images, footers, or textAlign. Therefore, these properties will be ignored.
Images
Images can be added in place of, or in conjunction with, icons. Just pass an url into the image prop,
and it will expand to the edges of the card.
Make sure that all images are the same proportions when used in a singular row.
Also, when passing an element to the image prop that consists solely of inline elements
or does not contain an<img /> element, each element will require a style of width: 100%.
Footer
Footers can contain any number of elements and will always align to the bottom of the card.
However, if you supply a footer containing a EuiButton you must not also give it an onClick.
When using footers to display generic "Go" buttons, you must provide an aria-label to the button itself
that refers back to the title of the card.
Beta badge
If the card links to or references a module that is not GA (beta, lab, etc.), you can add a betaBadgeProps.label
and betaBadgeProps.tooltipContent to the card, and it will properly create and position an EuiBetaBadge.
If you want to change the title of the tooltip, supply a betaBadgeProps.title prop.
Selectable
When you have a list of cards that can be selected but do not navigate anywhere, you can add the selectable prop.
The prop is an object that extends EuiButtonEmpty. It will apply the button as seen below,
and passing selectable.isSelected=true will alter the styles of the card and button to look selected.
When providing an extra link to more details or such, be sure to stop event propagation from also selecting the card.
Checkable
EuiCheckableCard wraps an EuiRadio or EuiCheckbox with a more-prominent panel, allowing for children to be displayed.
When used as a radio group, you must provide a fieldset with a legend for accessibility.
Custom children
In the event that you need more than just paragraph text for the description, you can supplement with anything
you need as the children of the component. You can also completely replace the description with custom children,
but EuiCard at least one of these.
Plain and other colors
If you need a card with no borders or shadows pass display="plain". This is a good option to avoid nested panels.
Adding an interaction to the card will provide the clickable styling on hover. The display prop also accepts all
other EuiPanel colors like 'transparent'.
For non-interactive cards, reduce or eliminate the padding as needed to suit your layout with the prop paddingSize.