Mockline v0.19.0

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.

<template>
  <MCard>
    This is a basic card with some content.
  </MCard>
</template>

With Header and Footer

Add header and footer sections to organize content:

Card Title

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

<template>
  <MCard>
    <template #header>
      <div class="flex justify-between items-center">
        <h3 class="text-lg font-semibold">Card Title</h3>
        <MButton size="sm" variant="ghost">More</MButton>
      </div>
    </template>

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

    <template #footer>
      <div class="flex justify-end gap-2">
        <MButton variant="ghost">Cancel</MButton>
        <MButton>Save</MButton>
      </div>
    </template>
  </MCard>
</template>

Variants

Cards come in three different variants:

Outline Variant

This is a card with outline variant.

Soft Variant

This is a card with soft variant.

Subtle Variant

This is a card with subtle variant.

<template>
  <div class="space-y-4">
    <MCard variant="outline">
      <template #header>
        Outline Variant
      </template>
      This is a card with outline variant.
    </MCard>

    <MCard variant="soft">
      <template #header>
        Soft Variant
      </template>
      This is a card with soft variant.
    </MCard>

    <MCard variant="subtle">
      <template #header>
        Subtle Variant
      </template>
      This is a card with subtle variant.
    </MCard>
  </div>
</template>

Complex Content

Cards can contain complex content layouts:

John Doe

Posted 2 hours ago

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

<template>
  <MCard>
    <template #header>
      <div class="flex items-center gap-4">
        <MAvatar src="https://avatars.githubusercontent.com/u/71938701?v=4" />
        <div>
          <h3 class="font-semibold">John Doe</h3>
          <p class="text-sm text-gray-500">Posted 2 hours ago</p>
        </div>
      </div>
    </template>

    <div class="space-y-4">
      <p>
        This is a more complex card example that shows how you can combine
        different components and create rich layouts.
      </p>
      <img
        src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba"
        class="rounded-lg w-full h-48 object-cover"
      />
    </div>

    <template #footer>
      <div class="flex justify-between items-center">
        <div class="flex gap-4">
          <MButton variant="ghost" size="sm">Like</MButton>
          <MButton variant="ghost" size="sm">Comment</MButton>
        </div>
        <MButton variant="ghost" size="sm">Share</MButton>
      </div>
    </template>
  </MCard>
</template>

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.