Mockline v0.17.3

Card

A versatile container component that groups related content and actions with support for header, body, and footer sections.

Overview

The Card component is a flexible container that helps organize and present content in a clear and consistent way. It supports different visual styles and can include headers, footers, and main content areas.

Features

  • Multiple visual variants (outline, soft, subtle)
  • Optional header and footer sections
  • Flexible content layout
  • Consistent spacing and borders
  • Responsive design
  • Customizable appearance

Usage

Basic Card

The simplest way to use the card is with content in the default slot:

This is a basic card with some content.

With Header and Footer

Add header and footer sections to organize content:

This is the main content of the card. You can put any content here.

Variants

Cards come in three different variants:

This is a card with outline variant.

This is a card with soft variant.

This is a card with subtle variant.

Complex Content

Cards can contain complex content layouts:

This is a more complex card example that shows how you can combine different components and create rich layouts.

Props

variant
'outline' | 'soft' | 'subtle'

The visual style variant of the card.

class
string

Additional CSS classes to apply to the card.

Slots

default
any

The main content of the card.

header
any

Optional header content.

footer
any

Optional footer content.

Best Practices

  1. Content organization:
    • Use headers for titles and primary actions
    • Keep main content clear and focused
    • Use footers for secondary actions or metadata
  2. Visual hierarchy:
    • Choose appropriate variants for the context
    • Maintain consistent spacing
    • Use clear visual separation between sections
  3. Responsive design:
    • Ensure content adapts well to different screen sizes
    • Consider mobile-first layouts
    • Use appropriate spacing on different devices
  4. Accessibility:
    • Use semantic HTML within cards
    • Maintain proper heading hierarchy
    • Ensure sufficient color contrast
  5. Layout considerations:
    • Don't overcrowd cards with content
    • Use grid or flex layouts for card collections
    • Consider card height consistency in groups
Avatar Group
A component for displaying a collection of avatars with automatic overflow handling and customizable appearance.
Divider
A flexible divider component that can be used to separate content with optional labels, icons, and various styles.