Hopper

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
AI Tip Want to skip the docs? Use the MCP Server

Usage

Variants

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

VariantPurpose
mainMain cards are used to set the first level of content of the page. They use neutral-surface and border-weak tokens with no elevation. Most content is intended to be set in this card.
second-levelSecond-level cards are used to group elements that are interactive within a main card with an overarching context, like a small form. They use a neutral-surface-weak token.

Sections

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

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

Best Practices

Cards are used to group related information together. They follow a specific hierarchy to help users scan through content easily. Whatever the level of hierarchy, Cards all share a 8px border radius.

Cards should:

  • Display information that prioritizes what the user needs to know most first.
  • Use headings that set clear expectations about the card's purpose.
  • Avoid too many CTA or links and only one primary CTA per card

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