Card

A common container component.

Basic

Hoverable

Shadow

Types

Show different states with colors.

With Footer

With Image

With Divider

Show different types of content using Divider

APIs / Schnittstellendokumentation

Card.Props

AttributeDescriptionTypeAccepted valuesDefault
hoverableadd effect on hoverboolean-false
shadowshow shadowboolean-false
typecard typeCardType-default
widthCSS width valuestring-100%
...native propsHTMLAttributes'id', className', ...-

Card.Content.Props[alias: Card.Body]

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', className', ...-

Card.Footer.Props[alias: Card.Actions]

AttributeDescriptionTypeAccepted valuesDefault
disableAutoMargincancel automatic margin valueboolean-false
...native propsHTMLAttributes'id', className', ...-

CardType

type CardType =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
  | 'alert'
  | 'purple'
  | 'violet'
  | 'cyan'

Co-Creators