Skip to main content
Kaleidoscope

Card

HW
MB

Useful as a container to group related information and actions. Cards create a clear separation when displaying sets of grouped content.

Default

What you get out of the box with this component:

Editable example
<Card>
  <div className="space-inset-m">
    <p>This is a card with some basic content inside it.</p>
    <p>You can use it as a consistent container for content, when you don't necessarily want or need a floating Panel.</p>
  </div>
</Card>

Variants

We support two distinct variants for links and buttons.

Link

An anchor tag that is skinned to look like a card; useful for when you need clicking a card to link to a URL.

Editable example
<LinkCard href="https://www.qwilr.com" target="_blank">
  <div className="space-inset-m">
    <p>Click to go to Qwilr</p>
  </div>
</LinkCard>

It supports the following attributes from the anchor tag spec:

  • href
  • target
  • rel

Button

A button that is skinned to look like a card; useful for when clicking the entire card should perform an action.

Editable example
<ButtonCard onClick={() => alert("You clicked me!")}>
  <div className="space-inset-m">
    Click me!
  </div>
</ButtonCard>

ButtonCard also supports the isDraggable prop to indicate it can be used in drag-and-drop contexts. Note that you will need to wrap the ButtonCard with a draggable element to support drag-and-drop, however.

Editable example
<div draggable onDragEnd={() => alert("You dragged me!")}>
  <ButtonCard onClick={() => alert("You clicked me!")} isDraggable>
    <div className="space-inset-m">
      Drag me!
    </div>
  </ButtonCard>
</div>

Elevation

Use elevation to place greater emphasis on a card. See the surfaces doc for more info. The maximum resting elevation is 2 to allow for the hover state on draggable cards to traverse to level 3.

Editable example
<Card elevation={0}>
  <div className="space-inset-m">
    Level 0 (default)
  </div>
</Card>
<Card elevation={1}>
  <div className="space-inset-m">
    Level 1
  </div>
</Card>
<Card elevation={2}>
  <div className="space-inset-m">
    Level 2
  </div>
</Card>

Theming

We also support a dark theme for all variants:

Editable example
<Card theme={CardTheme.Dark}>
  <div className="space-inset-m">
    Lights off!
  </div>
</Card>

Best practices

This component behaves very similarly to the Panel component, but Panels are designed specifically for floating content (menus, for example).