Cards

Cards Overview

Our cards system provides flexible containers for content with consistent styling. Cards help organize information, create visual hierarchy, and maintain a cohesive look across the platform. We offer several card variations to accommodate different content needs and contexts.

Basic Card

The standard card provides a subtle container with a light background, border, and shadow:

<div class="card">
  <h3>Card Title</h3>
  <p>This is a basic card component with subtle styling. It works well for containing related content and creating visual separation from surrounding elements.</p>
  <a href="#" class="btn-primary">Action</a>
</div>

Content Card

Content cards have minimal styling with transparent backgrounds, making them flexible for various contexts:

<div class="content-card">
  <h3>Content Card</h3>
  <p>Content cards use a transparent background with no shadow, making them perfect for content that should blend with the surrounding area while maintaining consistent spacing.</p>
  <p>They're often used for text-heavy sections where visual separation is less important than readability.</p>
</div>

White Content Card

White content cards provide higher contrast and more emphasis, especially on colored backgrounds:

<div class="full-width-panel solution-panel">
  <div class="panel-content">
    <div class="white-content-card">
      <h3>White Content Card</h3>
      <p>White content cards provide stronger visual contrast against colored backgrounds. They use deeper shadows and more padding to create a sense of elevation.</p>
      <p>These cards are perfect for featuring important content on colored panel backgrounds.</p>
    </div>
  </div>
</div>

Team Member Card

A specialized card variant for displaying team member profiles:

Jane Smith

Chief Marketing Officer

• Marketing strategy development
• Brand positioning
• International market expansion

in

html

<div class="team-member">
  <img src="/path/to/photo.jpg" alt="Jane Smith" class="team-photo">
  <h3>Jane Smith</h3>
  <p class="team-title">Chief Marketing Officer</p>
  <ul>
    <li>Marketing strategy development</li>
    <li>Brand positioning</li>
    <li>International market expansion</li>
  </ul>
  <div class="team-member-linkedin">
    <a href="https://linkedin.com/in/janesmith">
      <i class="fab fa-linkedin"></i>
    </a>
  </div>
</div>

Feature Card

Cards specifically designed for displaying features or benefits:

<div class="feature-item">
  <div class="feature-icon">
    <svg><!-- Icon SVG --></svg>
  </div>
  <h3>Feature Title</h3>
  <p>This feature card highlights a key benefit or feature with an icon, title, and descriptive text.</p>
</div>

Solution Card

Cards for presenting solutions or steps in a process:

<div class="solution-item">
  <div class="solution-number">1</div>
  <div class="solution-content">
    <h3>Solution Title</h3>
    <p>This solution card presents a numbered step or solution with a title and description, creating a clear visual hierarchy for processes.</p>
  </div>
</div>

Responsive Behavior

All card components are responsive, adapting to different screen sizes:

Desktop Behavior

• Standard layout with full padding and spacing
• Team member cards in multi-column grid
• Feature items in vertical alignment

Mobile Behavior

• Reduced padding for improved space utilization
• Single-column layout for all card grids
• Feature items switch to horizontal alignment on smaller screens
• Team member photos may be slightly smaller

Implementation Guidelines

Card Container Best Practices

1. Choose the right card type for your content:
   • Use basic cards for general content containers
   • Use content cards for text-heavy sections
   • Use white content cards for featured content on colored backgrounds
   • Use specialized cards (team, feature, solution) for specific content types
2. Maintain consistent spacing within cards:
   • Start with a heading (h2-h6) at the top
   • Use standard paragraph spacing between elements
   • Include a call-to-action at the bottom when relevant
3. Consider card grouping for related content:
   • Use team-section for team member cards
   • Use feature-grid for feature items
   • Use solutions-list for solution items

Code Examples

Card Grid Layout

<div class="feature-grid">
  <div class="feature-item">
    <!-- Feature content -->
  </div>
  <div class="feature-item">
    <!-- Feature content -->
  </div>
  <div class="feature-item">
    <!-- Feature content -->
  </div>
</div>

Team Member Grid

<div class="team-section">
  <div class="team-member">
    <!-- Team member content -->
  </div>
  <div class="team-member">
    <!-- Team member content -->
  </div>
</div>

Solution List

<div class="solutions-list">
  <div class="solution-item">
    <!-- Solution content -->
  </div>
  <div class="solution-item">
    <!-- Solution content -->
  </div>
</div>