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 conjuction with, icons. Just pass a 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 suppliment 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.
Props
EuiCard
Prop | Description and type | Default value |
|---|---|---|
Prop title# | Description and type Cards are required to have at least a title and a description and/or children NonNullable<ReactNode> | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop children# | Description and type Custom children ReactNode | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop footer# | Description and type Accepts any combination of elements ReactNode | Default value |
Prop image# | Description and type Accepts a url in string form or ReactElement for a custom image component string | ReactElement | Default value |
Prop textAlign# | Description and type Changes alignment of the title and description "center" | "left" | "right" | Default value center |
Prop layout# | Description and type Change to "horizontal" if you need the icon to be left of the content. "horizontal" | "vertical" | Default value vertical |
Prop titleElement# | Description and type Determines the title's heading element "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | Default value p |
Prop titleSize# | Description and type Determines the title's size, matching that of EuiTitle. "xs" | "s" | Default value s |
Prop description# | Description and type Placed within a small EuiText NonNullable<ReactNode> | Default value |
Prop icon# | Description and type Accepts an ReactElement<EuiIconProps, string | JSXElementConstructor<any>> | Default value |
Prop onClick# | Description and type Use only if you want to forego a button in the footer and make the whole card clickable any | Default value |
Prop isDisabled# | Description and type Type: boolean | Default value |
Prop href# | Description and type Type: string | Default value |
Prop target# | Description and type Type: string | Default value |
Prop betaBadgeProps# | Description and type Adds a badge to top of the card to label it as "Beta" or other non-GA state. EuiBetaBadgeProps | Default value |
Prop display# | Description and type Matches to the color property of EuiPanel. If defined, removes any border & shadow. "transparent" | "accent" | "primary" | "success" | "warning" | "danger" | "plain" | "subdued" | Default value |
Prop paddingSize# | Description and type Padding applied around the content of the card "xs" | "s" | "m" | "l" | "xl" | "none" | Default value m |
Prop selectable# | Description and type Adds a button to the bottom of the card to allow for in-place selection (DisambiguateSet<EuiButtonPropsForAnchor, EuiButtonPropsForButton> & EuiButtonDisplayCommonProps & EuiButtonProps & { ...; } & ButtonHTMLAttributes<...> & { ...; }) | (DisambiguateSet<...> & ... 3 more ... & { ...; }) | Default value |
Prop hasBorder# | Description and type Use a border style of card instead of shadow boolean | Default value |
EuiCheckableCard
Prop | Description and type | Default value |
|---|---|---|
Prop onChange# | Description and type Type: ChangeEventHandler<HTMLInputElement> | Default value Required |
Prop id# | Description and type Type: string | Default value Required |
Prop label# | Description and type Type: ReactNode | Default value Required |
Prop disabled# | Description and type Type: boolean | Default value |
Prop className# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop checked# | Description and type Type: boolean | Default value |
Prop labelProps# | Description and type Object of props passed to the CommonProps & LabelHTMLAttributes<HTMLLabelElement> | Default value |
Prop checkableType# | Description and type Whether the control is a radio button or checkbox "checkbox" | "radio" | Default value radio |
Prop hasShadow# | Description and type Type: boolean | Default value |
Prop hasBorder# | Description and type Type: boolean | Default value true |