Menu Icon

Card

A card provides a empty container to fill with the components. They let users group the components and visuals.

Usage

Differentiation features the component group in the container.

Guidance

  • Card should hold a header.
  • It should contain component(s) related with the header.

When to use

  • Use Cards to cluster in an easy on the eye manner.

Additional info

  • Consider using a bordered Card in dense environments.
  • Consider using hoverable for the clickable cards.

Variations

  • There are several attributes of Cards with varying degrees of emphasis. Emphasis determines a Card’s appearance and size.
  • The updatable properties of Cards are header, size, borders and round shape.
  • The updatable behaviour of Cards is hoverable.
  • The updatable style features of Cards are display, margin, padding, size, overflow, background, border, effects and css.
  • The updatable style features of Card Headers are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Card Body are display, margin, padding, size, overflow, typography, background, border, effects and css.
  • The usable dynamic properties of Cards are bordered, title, size, hoverable, extra, cover, description, headStyle, bodyStyle, loading, hidden and style.