Card
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.
Example of a card's description. Stick to one or two sentences.
Example of a card's description. Stick to one or two sentences.
Example of a card's description. Stick to one or two sentences.
Example of a card's description. Stick to one or two sentences.
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.
textAlign. Therefore, these properties will be ignored.This card adds uses an 'xl' size icon which works well in a horizontal layout.
This card uses an 'l' size icon but also shrinks the 'titleSize' to 'xs'.
Example of a card's description. Stick to one or two sentences.
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.
Example of a card's description. Stick to one or two sentences.
Example of a card's description. Stick to one or two sentences.
This card has an href and should be a link.
Beta badge
If the card links to or references a module that is not GA (beta, lab, etc), you can add a betaBadgeLabel and betaBadgeTooltipContent to the card and it will properly create and position an EuiBetaBadge. If you want to change the title of the tooltip, supply a betaBadgeTitle prop.
Example of a card's description. Stick to one or two sentences.
Example of a card's description. Stick to one or two sentences.
Example of a card's description. Stick to one or two sentences.
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.
Example of a short card description.
Example of a longer card description. See how the footers stay lined up.
Example of a short card description.
Custom children
In the event that you need more than just paragraph text for the description, you can pass anything you need as the children of the component.
Wrap a lists with EuiText size="s" to match the description text.
- Bullet 1
- Bullet 2
- Bullet 3
Add any controls you need.
Just be sure not to add any onClick handler to the card if the children are also interactable.
<yoda>Hello, young Skywalker</yoda>