Honeycomb

Card

Displays a card with header, content, and footer.

When To Use

  • To group related content together.
  • To display a summary or preview of information.
  • To create a contained section with a border.
Login Card
A standard card with header, content, and footer.
Login to your account
Enter your email below to login to your account
Small Size
A compact card with reduced padding.
Small Card
This card uses reduced padding for a more compact appearance.

Card content with reduced spacing.

With Image
A card with a badge and event content.
Featured
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.