> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards & Content

> MemberPulse card patterns, content articles, and layout components

# Cards & Content

Cards are versatile containers for grouping related content and actions.

***

## Basic Card

<Card>
  <div style={{padding: '24px'}}>
    <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '8px'}}>Card Title</h3>
    <p style={{color: '#6C757D', marginBottom: '16px'}}>This is a basic card with a title and description. Cards are used to group related content together.</p>

    <div style={{display: 'flex', gap: '12px'}}>
      <div style={{backgroundColor: '#2421C4', color: 'white', padding: '8px 16px', borderRadius: '0', fontSize: '14px', cursor: 'pointer'}}>Primary Action</div>
      <div style={{color: '#2421C4', padding: '8px 16px', fontSize: '14px', cursor: 'pointer'}}>Secondary</div>
    </div>
  </div>
</Card>

### Card Styling

```css theme={null}
.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.card-content {
  padding: 1.5rem;
}
```

***

## Stat Cards

Used on dashboards to display key metrics.

<CardGroup cols={4}>
  <Card>
    <div style={{padding: '20px'}}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px'}}>
        <span style={{fontSize: '14px', color: '#6C757D'}}>Total Members</span>
        <span style={{fontSize: '20px'}}>👥</span>
      </div>

      <div style={{fontSize: '32px', fontWeight: '700', marginBottom: '4px'}}>2,847</div>
      <div style={{fontSize: '12px', color: '#10B981'}}>↑ 12% from last month</div>
    </div>
  </Card>

  <Card>
    <div style={{padding: '20px'}}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px'}}>
        <span style={{fontSize: '14px', color: '#6C757D'}}>Active Plans</span>
        <span style={{fontSize: '20px'}}>📋</span>
      </div>

      <div style={{fontSize: '32px', fontWeight: '700', marginBottom: '4px'}}>1,234</div>
      <div style={{fontSize: '12px', color: '#10B981'}}>↑ 8% from last month</div>
    </div>
  </Card>

  <Card>
    <div style={{padding: '20px'}}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px'}}>
        <span style={{fontSize: '14px', color: '#6C757D'}}>Revenue</span>
        <span style={{fontSize: '20px'}}>💰</span>
      </div>

      <div style={{fontSize: '32px', fontWeight: '700', marginBottom: '4px'}}>\$45.2k</div>
      <div style={{fontSize: '12px', color: '#10B981'}}>↑ 23% from last month</div>
    </div>
  </Card>

  <Card>
    <div style={{padding: '20px'}}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px'}}>
        <span style={{fontSize: '14px', color: '#6C757D'}}>Churn Rate</span>
        <span style={{fontSize: '20px'}}>📉</span>
      </div>

      <div style={{fontSize: '32px', fontWeight: '700', marginBottom: '4px'}}>2.4%</div>
      <div style={{fontSize: '12px', color: '#DC3545'}}>↓ 0.3% from last month</div>
    </div>
  </Card>
</CardGroup>

### Stat Card Anatomy

| Element   | Description                  |
| --------- | ---------------------------- |
| **Label** | Metric name (muted text)     |
| **Icon**  | Visual indicator (top right) |
| **Value** | Large, bold number           |
| **Trend** | Change indicator with colour |

***

## Content Cards

### Article Card

<Card>
  <div style={{display: 'flex', flexDirection: 'column'}}>
    <div style={{height: '160px', backgroundColor: '#E2E8F0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#6C757D'}}>
      Image Placeholder
    </div>

    <div style={{padding: '20px'}}>
      <div style={{display: 'flex', gap: '8px', marginBottom: '12px'}}>
        <span style={{backgroundColor: '#ECEBFF', color: '#2421C4', padding: '2px 8px', borderRadius: '0', fontSize: '12px'}}>News</span>
        <span style={{color: '#6C757D', fontSize: '12px'}}>Dec 15, 2024</span>
      </div>

      <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '8px'}}>Annual Conference 2025 Announced</h3>
      <p style={{color: '#6C757D', fontSize: '14px', marginBottom: '16px', lineHeight: '1.5'}}>Join us for our biggest event of the year featuring keynote speakers and networking opportunities...</p>
      <div style={{color: '#2421C4', fontSize: '14px', fontWeight: '500', cursor: 'pointer'}}>Read more →</div>
    </div>
  </div>
</Card>

### Resource Card

<Card>
  <div style={{padding: '20px', display: 'flex', gap: '16px', alignItems: 'flex-start'}}>
    <div style={{width: '48px', height: '48px', backgroundColor: '#DC3545', borderRadius: '0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '20px', flexShrink: 0}}>
      PDF
    </div>

    <div style={{flex: 1}}>
      <h4 style={{fontSize: '16px', fontWeight: '600', marginBottom: '4px'}}>2024 Industry Report</h4>
      <p style={{color: '#6C757D', fontSize: '14px', marginBottom: '8px'}}>Comprehensive analysis of industry trends and forecasts</p>

      <div style={{display: 'flex', gap: '16px', fontSize: '12px', color: '#6C757D'}}>
        <span>PDF • 2.4 MB</span>
        <span>Downloaded 1,234 times</span>
      </div>
    </div>

    <div style={{color: '#2421C4', cursor: 'pointer'}}>↓</div>
  </div>
</Card>

### Event Card

<Card>
  <div style={{padding: '20px'}}>
    <div style={{display: 'flex', gap: '16px'}}>
      <div style={{textAlign: 'center', backgroundColor: '#F5F5F7', padding: '12px 16px', borderRadius: '0'}}>
        <div style={{fontSize: '24px', fontWeight: '700', color: '#2421C4'}}>15</div>
        <div style={{fontSize: '12px', color: '#6C757D', textTransform: 'uppercase'}}>Jan</div>
      </div>

      <div style={{flex: 1}}>
        <h4 style={{fontSize: '16px', fontWeight: '600', marginBottom: '4px'}}>Networking Breakfast</h4>
        <p style={{color: '#6C757D', fontSize: '14px', marginBottom: '8px'}}>Connect with fellow members over breakfast</p>

        <div style={{display: 'flex', gap: '16px', fontSize: '12px', color: '#6C757D'}}>
          <span>📍 Sydney CBD</span>
          <span>🕐 8:00 AM - 10:00 AM</span>
        </div>
      </div>

      <div style={{backgroundColor: '#2421C4', color: 'white', padding: '8px 16px', borderRadius: '0', fontSize: '14px', height: 'fit-content', cursor: 'pointer'}}>Register</div>
    </div>
  </div>
</Card>

***

## Profile Cards

### Member Profile Card

<Card>
  <div style={{padding: '24px', textAlign: 'center'}}>
    <div style={{width: '80px', height: '80px', borderRadius: '0', backgroundColor: '#2421C4', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', fontWeight: '600', margin: '0 auto 16px'}}>JS</div>
    <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '4px'}}>John Smith</h3>
    <p style={{color: '#6C757D', fontSize: '14px', marginBottom: '12px'}}>Senior Software Engineer</p>
    <span style={{backgroundColor: '#ECFDF5', color: '#065F46', padding: '4px 12px', borderRadius: '0', fontSize: '12px'}}>Professional Member</span>

    <div style={{marginTop: '16px', paddingTop: '16px', borderTop: '1px solid #E2E8F0', display: 'flex', justifyContent: 'space-around'}}>
      <div>
        <div style={{fontSize: '18px', fontWeight: '600'}}>24</div>
        <div style={{fontSize: '12px', color: '#6C757D'}}>CPD Points</div>
      </div>

      <div>
        <div style={{fontSize: '18px', fontWeight: '600'}}>12</div>
        <div style={{fontSize: '12px', color: '#6C757D'}}>Events</div>
      </div>

      <div>
        <div style={{fontSize: '18px', fontWeight: '600'}}>3</div>
        <div style={{fontSize: '12px', color: '#6C757D'}}>Courses</div>
      </div>
    </div>
  </div>
</Card>

### Company Profile Card

<Card>
  <div style={{padding: '24px'}}>
    <div style={{display: 'flex', gap: '16px', alignItems: 'flex-start', marginBottom: '16px'}}>
      <div style={{width: '64px', height: '64px', backgroundColor: '#F5F5F7', borderRadius: '0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px'}}>🏢</div>

      <div>
        <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '4px'}}>Acme Corporation</h3>
        <p style={{color: '#6C757D', fontSize: '14px'}}>Technology Solutions Provider</p>
      </div>
    </div>

    <div style={{display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px'}}>
      <span style={{backgroundColor: '#F5F5F7', padding: '4px 12px', borderRadius: '0', fontSize: '12px'}}>Software</span>
      <span style={{backgroundColor: '#F5F5F7', padding: '4px 12px', borderRadius: '0', fontSize: '12px'}}>Consulting</span>
      <span style={{backgroundColor: '#F5F5F7', padding: '4px 12px', borderRadius: '0', fontSize: '12px'}}>Enterprise</span>
    </div>

    <div style={{display: 'flex', gap: '12px'}}>
      <div style={{flex: 1, backgroundColor: '#2421C4', color: 'white', padding: '8px', borderRadius: '0', fontSize: '14px', textAlign: 'center', cursor: 'pointer'}}>Contact</div>
      <div style={{flex: 1, border: '1px solid #E2E8F0', padding: '8px', borderRadius: '0', fontSize: '14px', textAlign: 'center', cursor: 'pointer'}}>View Profile</div>
    </div>
  </div>
</Card>

***

## Pricing Cards

<CardGroup cols={3}>
  <Card>
    <div style={{padding: '24px'}}>
      <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '4px'}}>Basic</h3>
      <p style={{color: '#6C757D', fontSize: '14px', marginBottom: '16px'}}>For individuals getting started</p>

      <div style={{marginBottom: '16px'}}>
        <span style={{fontSize: '36px', fontWeight: '700'}}>\$29</span>
        <span style={{color: '#6C757D'}}>/month</span>
      </div>

      <ul style={{listStyle: 'none', padding: 0, marginBottom: '24px'}}>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Basic member profile</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Event access</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Resource library</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px', color: '#6C757D'}}>✗ CPD tracking</li>
      </ul>

      <div style={{border: '1px solid #2421C4', color: '#2421C4', padding: '10px', borderRadius: '0', textAlign: 'center', cursor: 'pointer'}}>Get Started</div>
    </div>
  </Card>

  <Card>
    <div style={{padding: '24px', position: 'relative'}}>
      <div style={{position: 'absolute', top: '0', right: '0', backgroundColor: '#2421C4', color: 'white', padding: '4px 12px', borderRadius: '0', fontSize: '12px'}}>Popular</div>
      <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '4px'}}>Professional</h3>
      <p style={{color: '#6C757D', fontSize: '14px', marginBottom: '16px'}}>For active professionals</p>

      <div style={{marginBottom: '16px'}}>
        <span style={{fontSize: '36px', fontWeight: '700'}}>\$79</span>
        <span style={{color: '#6C757D'}}>/month</span>
      </div>

      <ul style={{listStyle: 'none', padding: 0, marginBottom: '24px'}}>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Everything in Basic</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ CPD tracking</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Course access</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Directory listing</li>
      </ul>

      <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px', borderRadius: '0', textAlign: 'center', cursor: 'pointer'}}>Get Started</div>
    </div>
  </Card>

  <Card>
    <div style={{padding: '24px'}}>
      <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '4px'}}>Enterprise</h3>
      <p style={{color: '#6C757D', fontSize: '14px', marginBottom: '16px'}}>For organisations</p>

      <div style={{marginBottom: '16px'}}>
        <span style={{fontSize: '36px', fontWeight: '700'}}>Custom</span>
      </div>

      <ul style={{listStyle: 'none', padding: 0, marginBottom: '24px'}}>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Everything in Professional</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Bulk member management</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Custom integrations</li>
        <li style={{display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '14px'}}>✓ Dedicated support</li>
      </ul>

      <div style={{border: '1px solid #2421C4', color: '#2421C4', padding: '10px', borderRadius: '0', textAlign: 'center', cursor: 'pointer'}}>Contact Sales</div>
    </div>
  </Card>
</CardGroup>

***

## Card Variants

### Elevated Card

<Card>
  <div style={{padding: '24px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'}}>
    <h4 style={{fontWeight: '600', marginBottom: '8px'}}>Elevated Card</h4>
    <p style={{color: '#6C757D', fontSize: '14px'}}>Uses box-shadow for depth. Good for hover states or primary content.</p>
  </div>
</Card>

### Outlined Card

<Card>
  <div style={{padding: '24px', border: '1px solid #E2E8F0'}}>
    <h4 style={{fontWeight: '600', marginBottom: '8px'}}>Outlined Card</h4>
    <p style={{color: '#6C757D', fontSize: '14px'}}>Subtle border, no shadow. Good for secondary or grouped content.</p>
  </div>
</Card>

### Interactive Card

<Card>
  <div style={{padding: '24px', cursor: 'pointer', transition: 'all 0.15s'}}>
    <h4 style={{fontWeight: '600', marginBottom: '8px'}}>Interactive Card</h4>
    <p style={{color: '#6C757D', fontSize: '14px'}}>Clickable card with hover effects. Use for navigation or selection.</p>
  </div>
</Card>

***

## Card Layout Guidelines

<Steps>
  <Step title="Consistent Padding" icon="ruler">
    Use consistent padding (typically 24px) for all cards in a section.
  </Step>

  <Step title="Visual Hierarchy" icon="layers">
    Establish clear hierarchy with title, description, and actions.
  </Step>

  <Step title="Action Placement" icon="mouse-pointer">
    Place primary actions at the bottom or in a clear location.
  </Step>

  <Step title="Responsive Grids" icon="layout-grid">
    Use responsive grid layouts that stack on mobile.
  </Step>
</Steps>