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 Title

This is a basic card with a title and description. Cards are used to group related content together.

Primary Action

Secondary

Card Styling

.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.

Total Members👥

2,847

↑ 12% from last month

Active Plans📋

1,234

↑ 8% from last month

Revenue💰

$45.2k

↑ 23% from last month

Churn Rate📉

2.4%

↓ 0.3% from last month

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

Image Placeholder

NewsDec 15, 2024

Annual Conference 2025 Announced

Join us for our biggest event of the year featuring keynote speakers and networking opportunities…

Read more →

Resource Card

PDF

2024 Industry Report

Comprehensive analysis of industry trends and forecasts

PDF • 2.4 MBDownloaded 1,234 times

↓

Event Card

15

Jan

Networking Breakfast

Connect with fellow members over breakfast

📍 Sydney CBD🕐 8:00 AM - 10:00 AM

Register

---

Profile Cards

Member Profile Card

JS

John Smith

Senior Software Engineer

Professional Member

24

CPD Points

12

Events

3

Courses

Company Profile Card

🏢

Acme Corporation

Technology Solutions Provider

SoftwareConsultingEnterprise

Contact

View Profile

---

Pricing Cards

Basic

For individuals getting started

$29/month

• ✓ Basic member profile
• ✓ Event access
• ✓ Resource library
• ✗ CPD tracking

Get Started

Popular

Professional

For active professionals

$79/month

• ✓ Everything in Basic
• ✓ CPD tracking
• ✓ Course access
• ✓ Directory listing

Get Started

Enterprise

For organisations

Custom

• ✓ Everything in Professional
• ✓ Bulk member management
• ✓ Custom integrations
• ✓ Dedicated support

Contact Sales

---

Card Variants

Elevated Card

Elevated Card

Uses box-shadow for depth. Good for hover states or primary content.

Outlined Card

Outlined Card

Subtle border, no shadow. Good for secondary or grouped content.

Interactive Card

Interactive Card

Clickable card with hover effects. Use for navigation or selection.

---

Card Layout Guidelines

1. Consistent Padding

   Use consistent padding (typically 24px) for all cards in a section.

2. Visual Hierarchy

   Establish clear hierarchy with title, description, and actions.

3. Action Placement

   Place primary actions at the bottom or in a clear location.

4. Responsive Grids

   Use responsive grid layouts that stack on mobile.