Card - Bellhop Design System

This card has content in the body area.

When to use

Use cards to organize information into scannable, digestible chunks that users can easily browse.

Dashboard Widgets

Display metrics, charts, and key information as individual cards on dashboard layouts.

Content Previews

Show preview summaries of articles, products, or other content items in a grid or list.

Feature Highlights

Present product features, pricing plans, or service offerings in distinct, comparable cards.

Data Summaries

Group related data points, statistics, or information into organized visual containers.

When not to use

For simple lists of items—use standard list elements for better semantics
When there's minimal content that doesn't need grouping
For data-dense tables—cards add too much visual weight
In space-constrained mobile views where cards waste space

Examples

Interact with live examples and copy the code to use in your project.

Basic Card

Simple card container with content

This card has content in the body area.

chevron_right HTML

<bh-card style="width: 320px; padding: 24px;">
  <h3>Welcome</h3>
  <p>Cards are flexible containers that help organize and group related content.</p>
</bh-card>

chevron_right React

import { BhCard } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    
      Welcome
      Cards are flexible containers that help organize and group related content.
    
  );
}

chevron_right Angular

<bh-card style="width: 320px; padding: 24px;">
  <h3>Welcome</h3>
  <p>Cards are flexible containers that help organize and group related content.</p>
</bh-card>

Anatomy

Cards have a flexible structure with optional header, content, and footer sections.

This card has content in the body area. It can use html inside, like bold or underlined text.

Container
Elevated surface with background, border, and shadow
Featured Icon (Optional)
Featured icon at the header of the card
Header (Optional)
Title, subtitle, or icon area at the top of the card
Content
Main body area containing text, images, charts, or other elements
Footer (Optional)
Action buttons, metadata, or supplementary information at the bottom

Types

Cards can be configured with different combinations of header, content, and footer sections.

Full Card

Complete card with header, content, and footer sections for maximum flexibility.

This is the main content area of the card with some example text.

Content Only

Simple card with just content, ideal for minimal, clean layouts.

A simple card containing only content without header or footer sections.

With Chart

Card containing data visualizations or charts for dashboard displays.

Interaction

Cards can be static containers or interactive elements with hover and click behaviors.

Static Cards

Non-interactive cards serve as visual containers without hover or click effects.

Clickable Cards

Entire card surface can be clickable with hover states and cursor changes.

Action Buttons

Footer actions provide specific interactions like Edit, Delete, or View Details.

Expandable Content

Cards can expand to reveal additional details or collapse to save space.

Placement

Cards work well in various layout patterns from grids to single-column lists.

Grid Layouts

Arrange cards in responsive grids for dashboards, product catalogs, or content galleries.

List Views

Stack cards vertically in lists for feeds, timelines, or search results.

Page Sections

Use cards to separate and organize different sections of content on a page.

Sidebar Widgets

Place cards in sidebars for auxiliary information, quick stats, or related content.

Accessibility

Cards are designed to be accessible with proper semantic structure and keyboard support.

Semantic Structure

Cards use proper heading hierarchy for titles and sections
Content is organized in a logical reading order
Regions are properly labeled when cards contain distinct sections

Keyboard Support

Tab: Navigate to clickable cards and action buttons
Enter/Space: Activate clickable cards or buttons
Non-interactive cards are excluded from keyboard navigation

Interactive Cards

Clickable cards have clear focus indicators
Cards announce their purpose to screen readers
Action buttons within cards have descriptive labels

Visual Hierarchy

Sufficient color contrast for text on card backgrounds
Clear visual separation between adjacent cards
Headings and content follow logical information hierarchy

Related Components

Components that provide similar or complementary functionality.

Component	Usage
Badge	Use to highlight status or categories within cards.
Button	Use for primary actions within card footers.
Avatar	Common in card headers to represent users or entities.
Dropdown	Use for secondary actions or options menus in card headers.

Resources

Design and development resources for the Card component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →