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

John Doe

Engineering lead · San Francisco

128

Projects

2.4k

Commits

98%

On time

Diane Myers

Diane Myers

Senior engineer · Berlin

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

Michelle Moreno

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.

John Doe · 8 min read Read
Product

Q2 product roadmap

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

Cynthia Harvey · 5 min read Read
Design

A new visual system for 2026

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

Michelle Moreno · 12 min read Read
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.