Card

Anatomy

import {Card} from '@staffbase/design';

<Card />

API reference

Card

Anatomy

Cards provide a contained surface for grouping related content. They use a consistent border radius and can accommodate various content types while maintaining visual hierarchy.

Properties

Padding

Cards can use any padding following the 8px grid for consistency. The amount of padding can be adjusted based on content requirements and visual hierarchy needs.

Best Practices

Do not deviate from default styling

Maintain card consistency by not adding borders, shadows, or custom styling. Keep cards consistent with other cards in your layout.

Cards should only be placed on Base backgrounds

Place cards exclusively on the neutral base background. Avoid placing cards on other background colors to maintain visual clarity.

Do not use cards as flyouts or modals

Cards are intended as static elements directly on page backgrounds. Use Dialog or Popover components for interactive overlays instead.

Inner elements should use borderRadius.6

The Card component has a Border Radius of 8px. Inner elements should use borderRadius.6 to maintain visual hierarchy.

Space Cards at a minimum of 24px

When placing multiple cards adjacent to each other, maintain a minimum 24px spacing for visual separation.

Usage Examples

Studio Dashboard

Cards are used on the Studio Dashboard to section and contain highlighted insights and information from different content areas.