Card

Cards are versatile containers for grouping related content and actions. They create visual separation and hierarchy in layouts.

When to use

• To group related information together
• To create visual separation between content sections
• To display product listings or portfolio items
• To show user profiles or team member information
• To create dashboard widgets or stats displays

Key features

• Flexible structure - Header, content, and footer sections
• Visual hierarchy - Built-in spacing and typography
• Interactive states - Clickable cards with hover effects
• Image support - Display media at the top of cards
• Responsive - Works in grid layouts and adapts to screen sizes
• Accessible - Semantic HTML structure

Anatomy

A card consists of:

• Container - The outer wrapper with border and shadow
• Header - Optional top section for titles
• Content - Main body area for text and elements
• Footer - Optional bottom section for actions
• Image - Optional media display area

Installation

npm install @pm7/core

CSS Classes

Data Attributes

Cards do not use any special data attributes. They are purely CSS-based components.

Basic Usage

<div class="pm7-card">
  <div class="pm7-card-content">
    <h3>Card Title</h3>
    <p>Card content goes here.</p>
  </div>
</div>

Card Variants

<!-- Outlined card (thicker border) -->
<div class="pm7-card pm7-card--outlined">
  <div class="pm7-card-content">
    <p>Outlined card with prominent border</p>
  </div>
</div>

<!-- Ghost card -->
<div class="pm7-card pm7-card--ghost">
  <div class="pm7-card-content">
    <p>Ghost card with no border or shadow</p>
  </div>
</div>

<!-- Elevated card -->
<div class="pm7-card pm7-card--elevated">
  <div class="pm7-card-content">
    <p>Elevated card with larger shadow, no border</p>
  </div>
</div>

<!-- Hoverable card -->
<a href="#" class="pm7-card pm7-card--hoverable">
  <div class="pm7-card-content">
    <h3>Clickable Card</h3>
    <p>This entire card is clickable with hover effect.</p>
  </div>
</a>

<!-- Card with dropdown (prevents menu clipping) -->
<div class="pm7-card pm7-card--with-dropdown">
  <div class="pm7-card-content">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <span>Card with dropdown menu</span>
      <div data-pm7-menu>
        <button class="pm7-menu-trigger pm7-button pm7-button--ghost pm7-button--sm">
          ⋮
        </button>
        <div class="pm7-menu-content">
          <button class="pm7-menu-item">Edit</button>
          <button class="pm7-menu-item">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

Status Cards

<!-- Success card -->
<div class="pm7-card pm7-card--success">
  <div class="pm7-card-header">
    <h3 class="pm7-card-title">Success!</h3>
  </div>
  <div class="pm7-card-content">
    <p>Operation completed successfully.</p>
  </div>
</div>

<!-- Warning card -->
<div class="pm7-card pm7-card--warning">
  <div class="pm7-card-header">
    <h3 class="pm7-card-title">Warning</h3>
  </div>
  <div class="pm7-card-content">
    <p>Please review before proceeding.</p>
  </div>
</div>

Card Grid System

<!-- Responsive grid (auto-fill) -->
<div class="pm7-card-grid">
  <div class="pm7-card">
    <div class="pm7-card-content">Card 1</div>
  </div>
  <div class="pm7-card">
    <div class="pm7-card-content">Card 2</div>
  </div>
  <div class="pm7-card">
    <div class="pm7-card-content">Card 3</div>
  </div>
</div>

<!-- Fixed 3 column grid -->
<div class="pm7-card-grid pm7-card-grid--fixed-3">
  <div class="pm7-card">
    <div class="pm7-card-content">Always 3 columns</div>
  </div>
  <!-- More cards... -->
</div>

CSS Customization

PM7 cards can be customized using CSS custom properties:

:root {
  /* Border radius */
  --pm7-card-radius: 0.5rem;
  
  /* Padding variants */
  --pm7-card-padding: 1.5rem;
  --pm7-card-padding-sm: 1rem;
  --pm7-card-padding-lg: 2rem;
  
  /* Visual properties */
  --pm7-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --pm7-card-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --pm7-card-border-width: 1px;
  
  /* Footer */
  --pm7-card-footer-bg: transparent;
}

JavaScript API

Cards don't require JavaScript initialization. For interactive features, use standard event handlers.

Grid System Details

The card grid system provides flexible layout options:

• Default grid: Auto-fills with minimum 300px columns
• Numbered grids (--2, --3, --4): Responsive with breakpoints
• Fixed grids (--fixed-2, etc.): Non-responsive, always maintain column count
• Gap: Uses --pm7-spacing-6 (1.5rem) between cards

Best Practices

• Consistent sizing: Use grid layouts for equal-height cards
• Clear hierarchy: Use title, description, and content sections appropriately
• Interactive cards: Use pm7-card--hoverable for clickable cards
• Status communication: Use status variants for important state information
• Padding choices: Select appropriate padding based on content density
• Images: Use pm7-card--no-padding with pm7-card-image--top for edge-to-edge images

Advanced Example - Product Card

<!-- Product card with image and actions -->
<div class="pm7-card pm7-card--hoverable">
  <img src="/product.jpg" alt="Product" class="pm7-card-image">
  <div class="pm7-card-header">
    <h3 class="pm7-card-title">Premium Headphones</h3>
    <p class="pm7-card-description">Wireless noise-cancelling headphones</p>
  </div>
  <div class="pm7-card-content">
    <p class="pm7-text-lg pm7-font-semibold">$299.99</p>
    <p class="pm7-text-sm pm7-text-muted">Free shipping</p>
  </div>
  <div class="pm7-card-footer pm7-card-footer--between">
    <button class="pm7-button pm7-button--outline">View Details</button>
    <button class="pm7-button pm7-button--primary">Add to Cart</button>
  </div>
</div>

Accessibility

• Use semantic HTML elements within cards
• Maintain proper heading hierarchy
• For clickable cards, use a single link wrapper
• Ensure sufficient color contrast for all text
• Add alt text to images

Copy this link that can be used as documentation for working with this component: