Skip to main content

# Cards

A toolkit of card patterns — profile, KPI, image, pricing, notification, list-group, mini-chart, and accent variants.

##### KPI & STAT CARDS

Revenue

$48,217

12.5% vs last 30d

New customers

284

8.2% vs last 30d

Bounce rate

38.4%

2.1pp vs last 30d

Conversion

3.24%

0.6pp vs last 30d

##### PROFILE CARDS

## John Doe

Engineering lead · San Francisco

128

Projects

2.4k

Commits

98%

On time

## Diane Myers

Senior engineer · Berlin

Backend, distributed systems, and a soft spot for typed languages. Currently leading the auth-flow refactor.

## Michelle Moreno

Product designer · New York

“Design isn’t how it looks — it’s how it works. And then how it looks.”

##### CONTENT CARDS

Engineering

### Migrating to a typed monorepo

Eight months in: what we got right, what we’d skip, and the surprising places TypeScript pays for itself.

Product

### Q2 product roadmap

Three big themes for the quarter: faster onboarding, deeper analytics, and a redesigned billing experience.

Design

### A new visual system for 2026

Refreshed colour tokens, an Inter-based type scale, and the soft-tinted accent palette across every surface.

##### PRICING CARDS

Starter

$0/mo

For solo builders

- 1 user seat
- 5 projects
- Community support
- 1 GB storage

Most popular

Pro

$24/mo

For small teams

- Up to 10 users
- Unlimited projects
- Priority email support
- 100 GB storage
- Advanced analytics

Enterprise

Custom

For larger orgs

- Unlimited users
- SSO & SCIM
- 24/7 dedicated support
- Audit logs
- Custom contract

##### NOTIFICATION CARDS

### New version deployed

Version 3.1.0 is live. Includes the new analytics dashboard and a redesigned billing flow.

### Backup completed

Your weekly backup finished in 2m 14s. 4.2 GB of data was archived to the off-site vault.

### Storage almost full

You’re using 82% of your 100 GB plan. Consider upgrading or pruning old projects to avoid hitting the cap.

### Payment failed

Your card ending in ···· 4242 was declined. Please update your billing details to keep your subscription active.

##### LIST & PREVIEW CARDS

## Recent uploads

Files added to your workspace this week.

All files

- Q2 roadmap.pdf 2.4 MB · updated 12 min ago
  John D.
- brand-marks-v3.zip 38 MB · updated 2 hours ago
  Michelle M.
- may-revenue.xlsx 182 KB · updated yesterday
  Diane M.
- board-deck-may.pptx 14 MB · updated 2 days ago
  Cynthia H.
- Customer interviews 12 files · updated 3 days ago
  Robert T.

Active sessions

8,492

API requests

412k

Error rate

0.18%

Latency p99

182 ms

##### ACCENT RAIL CARDS

### Brand

A simple card with a brand-blue left rail. Use it to call attention without going loud.

### Success

Green accent rail for positive states — goal hit, payment received, deploy succeeded.

### Warning

Amber rail for “heads up” states — storage filling, deadline approaching, etc.

### Danger

Red rail for failures — payment declined, integration broken, deploy failed.

Copyright © 2026 Colorlib. All rights reserved. Template by Colorlib.