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.97
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.97

Properties

PropertyAttributeDescriptionTypeValues
intlDeselectintl-deselect

When selectable is true, the accessible name for the component's checkbox for deselection.

text
A custom string
"Deselect" (default)
intlLoadingintl-loading

Accessible name when the component is loading.

optional
text
A custom string
"Loading" (default)
intlSelectintl-select

When selectable is true, the accessible name for the component's checkbox for selection.

text
A custom string
"Select" (default)
loadingloading

When true, a busy indicator is displayed.

boolean
A boolean property
truefalse
selectableselectable

When true, the component is selectable.

boolean
A boolean property
truefalse
selectedselected

When true, the component is selected.

boolean
A boolean property
truefalse
thumbnailPositionthumbnail-position

Sets the placement of the thumbnail defined in the thumbnail slot.

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

Events

NameDescriptionDetail
calciteCardSelect

Fires when selectable is true and the component is selected.

bubblescomposed
void

Slots

NameDescription
default (unnamed)

A slot for adding subheader/description content.

subtitle

A slot for adding a subtitle or short summary.

thumbnail

A slot for adding a thumbnail to the component.

title

A slot for adding a title.

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