Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
    • Accordion
    • Bottom bar
    • Card
    • Flyout
    • Modal
    • Panel
    • Popover
    • Resizable container
    • Tabs
  • Navigation
  • Display
  • Forms
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Containers
  • Card

Card

EuiCard is a content-oriented component built on top of

EuiPanel. Be sure to check out the guidelines for properly nesting panels.

Component

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.

Loading...

Usage

Images

Images can be added in place of, or in conjunction 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%.

Loading...

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.

Accessibility requirement

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.

Loading...

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.

Loading...

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.

Loading...

Checkable

EuiCheckableCard wraps an EuiRadio or EuiCheckbox with a more-prominent panel, allowing for children to be displayed.

Loading...

Accessibility requirement

When used as a radio group, you must provide a fieldset with a legend for accessibility.

Loading...

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.

Loading...

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.

Loading...

Props

EuiCard

Extends HTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
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

Type: 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

Type: ReactNode
↦
Default value
↵
Prop
aria-label#
↦
Description and type

Defines a string value that labels the current element.
@see aria-labelledby.

Type: string
↦
Default value
↵
Prop
footer#
↦
Description and type

Accepts any combination of elements

Type: ReactNode
↦
Default value
↵
Prop
image#
↦
Description and type

Accepts a url in string form or ReactElement for a custom image component

Type: string | ReactElement
↦
Default value
↵
Prop
textAlign#
↦
Description and type

Changes alignment of the title and description

Type: "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 layouts cannot be used in conjunction with image, footer, or textAlign.

Type: "horizontal" | "vertical"
↦
Default value
vertical
↵
Prop
titleElement#
↦
Description and type

Determines the title's heading element

Type: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"
↦
Default value
p
↵
Prop
titleSize#
↦
Description and type

Determines the title's size, matching that of EuiTitle.
Though, card titles can't be too large or small relative to the description text.

Type: "xs" | "s"
↦
Default value
s
↵
Prop
description#
↦
Description and type

Placed within a small EuiText <p> tag

Type: NonNullable<ReactNode>
↦
Default value
↵
Prop
icon#
↦
Description and type

Accepts an <EuiIcon> node or null

Type: 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

Type: 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.
Accepts all the props of [EuiBetaBadge](#/display/badge#beta-badge-type), where label is required.

Type: EuiBetaBadgeProps
↦
Default value
↵
Prop
display#
↦
Description and type

Matches to the color property of EuiPanel. If defined, removes any border & shadow.
Leave as undefined to display as a default panel.
Selectable cards will always display as a default panel.

Type: PanelColor
↦
Default value
↵
Prop
paddingSize#
↦
Description and type

Padding applied around the content of the card

Type: "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

Type: (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

Type: boolean
↦
Default value
↵
𐘂𐘂

EuiCheckableCard

Extends InputHTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
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.
@see aria-labelledby.

Type: 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 label element

Type: CommonProps & LabelHTMLAttributes<HTMLLabelElement>
↦
Default value
↵
Prop
checkableType#
↦
Description and type

Whether the control is a radio button or checkbox

Type: "checkbox" | "radio"
↦
Default value
radio
↵
Prop
hasShadow#
↦
Description and type
Type: boolean
↦
Default value
↵
Prop
hasBorder#
↦
Description and type
Type: boolean
↦
Default value
true
↵
𐘂𐘂
Edit this page

Previous
Bottom bar
Next
Flyout
  • Component
  • Usage
    • Images
    • Footer
    • Beta badge
    • Selectable
    • Checkable
    • Custom children
    • Plain and other colors
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic