Card

Calcite Cards are rectangular containers that can have images, buttons, and other custom content within.

Overview

Cards are essentially containing rectangles that have a slot for just about any type of content. They can be handy in creating uniform groups of content for the user to quickly browse or link to other pages.

It is important to keep groups of Cards consistent in your application. For example: avoid mixing Cards that have images and Cards that do not have images within a group.

Be mindful of copy length. Cards are intended to be scannable slices of the content they represent.

Usage

  • Snapshot of content for data, documentation, or maps
  • Succinct preview of content with links and a description
  • Groups of content for scan-ability
  • As marketing style visuals to draw focus

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
TabMove focus to next non-disabled item. If the currently focused item is the last item, the focus will leave the component
Tab and ShiftMove focus to previous non-disabled item. If the currently focused item is the first item, the focus will leave the component

API reference

calcite-card
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
intlDeselectintl-deselect

string to override English deselect text for checkbox when selectable is true

stringA custom string
"Deselect" (default)
intlLoadingintl-loading

string to override English loading text

optional
stringA custom string
"Loading" (default)
intlSelectintl-select

string to override English select text for checkbox when selectable is true

stringA custom string
"Select" (default)
loadingloading

When true, the cards content is waiting to be loaded. This state shows a busy indicator.

booleanA boolean property should be present, or not
truefalse
selectableselectable

Indicates whether the card is selectable.

booleanA boolean property should be present, or not
truefalse
selectedselected

Indicates whether the card is selected.

booleanA boolean property should be present, or not
truefalse
thumbnailPositionthumbnail-position

typedChoose from a set of typed values
block-endblock-start (default)inline-endinline-start

Events

NameDescriptionDetail
calciteCardSelect

Fired when a selectable card is selected

bubblescomposedcancelable
any

Slots

NameDescription
default (unnamed)

A slot for adding subheader/description content.

subtitle

A slot for adding a card subtitle or short summary.

thumbnail

A slot for adding a thumbnail to the card.

title

A slot for adding a card title.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.