Card

Cards are used to group similar concepts and tasks to make it easier for users to scan, read and get things done.

View sourceView on npmReport an issue

Usage

Variants

A card can use different variants. Second-level cards need to be used within a first-level card.

Sections

A card can use a header, content, and footer section.

Props

variant?

The visual style of the card.

Defaults to main.
style?

The inline style for the element.

children?

The children of the component.

className?

The CSS className for the element.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • outline variant has been renamed main.
  • elevated variant has been renamed second-level. You shouldn't use a second-level variant without a parent main variant.
  • orientation has been removed. Refer to this sample to see an implementation example.
  • fluid prop has been removed. Refer to this sample to see an implementation example.
  • size has been removed. Refer to this sample to quickly match old sizes.
  • The Hopper Card component does not include predefined layouts; developers are responsible for implementing any required layouts to meet their specific needs..

Layout Samples

To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in Orbiter.

Default

Image

Illustration

Size

Button

Button group

Orientation

Fluid