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.
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.
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
Annual Conference 2025 Announced
Join us for our biggest event of the year featuring keynote speakers and networking opportunities...
Resource Card
2024 Industry Report
Comprehensive analysis of industry trends and forecasts
Event Card
Networking Breakfast
Connect with fellow members over breakfast
Profile Cards
Member Profile Card
John Smith
Senior Software Engineer
Professional MemberCompany Profile Card
Acme Corporation
Technology Solutions Provider
Pricing Cards
Basic
For individuals getting started
- ✓ Basic member profile
- ✓ Event access
- ✓ Resource library
- ✗ CPD tracking
Professional
For active professionals
- ✓ Everything in Basic
- ✓ CPD tracking
- ✓ Course access
- ✓ Directory listing
Enterprise
For organisations
- ✓ Everything in Professional
- ✓ Bulk member management
- ✓ Custom integrations
- ✓ Dedicated support
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
- Consistent Padding
Use consistent padding (typically 24px) for all cards in a section.
- Visual Hierarchy
Establish clear hierarchy with title, description, and actions.
- Action Placement
Place primary actions at the bottom or in a clear location.
- Responsive Grids
Use responsive grid layouts that stack on mobile.