Previous Avatar Next Feature Card

Statistic Card

Highlighted metric display with label, value, trend, sparkline, and comparison variants.

Base: Number + Label

Minimal form — value and label only.

Total Revenue

Rp 48,2 jt

Orders

1.284

Avg. Order Value

Rp 375k

Return Rate

2,4%

With Trend Arrow

Up, down, and flat states with comparison period label.

Total Revenue

Rp 48,2 jt

+12,4% vs last month

Bounce Rate

38,7%

−5,1% vs last month

Active Users

9.410

+840 this week

Conversion Rate

3,2%

No change vs last week

With Icon

Icon anchored top-right for quick visual scanning.

Total Revenue

Rp 48,2 jt

+12,4% vs last month

Orders

1.284

+97 this month

Avg. Order

Rp 375k

−Rp 12k vs last month

Return Rate

2,4%

+0,3% vs last month

With Mini Sparkline

7-day trend line rendered via Chart.js. Canvas is sized by CSS; JS reads it after DOM ready.

Revenue

Rp 48,2 jt

+12,4% 7 days

Orders

1.284

+97 7 days

Bounce Rate

38,7%

−5,1% 7 days

With Comparison Period

Secondary row showing prior-period value for direct comparison.

Revenue

Rp 48,2 jt

+12,4%
Last month Rp 42,9 jt

New Customers

348

+19,6%
Last month 291

Avg. Session

3m 24s

−11,7%
Last week 3m 51s

Accent Bar

Left border accent for categorical colour coding.

Revenue

Rp 48,2 jt

+12,4%

Orders

1.284

+97

Pending

42

No change

Returns

31

+0,3%

Loading Skeleton

Shimmer placeholders while data is fetching.

Static reference — skeleton always visible below

Clickable — Drill-down

Full card is a link. Hover reveals chevron cue.

Revenue

Rp 48,2 jt

+12,4% vs last month

Orders

1.284

+97 vs last month

Returns

31

+0,3% vs last month

Real-world: Dashboard Row

Full e-commerce KPI row — icon + trend + comparison + accent.

Gross Revenue

Rp 127,4 jt

+18,2%
vs last month Rp 107,8 jt

Total Orders

3.847

+412
vs last month 3.435

Avg. Order Value

Rp 331k

−Rp 8k
vs last month Rp 339k

Return Rate

1,9%

−0,4%
vs last month 2,3%
12

Card

Flexible content container with header, body, footer, and media.

Accordion

Collapsible content panels with smooth expand/collapse animation.

Timeline

Vertical or horizontal event/step timeline with markers.

List Group

Styled list of items with optional icons, badges, and actions.

Badge

Small inline label for status, count, and category tags.

Chip

Compact interactive label for filters, tags, and selections.

Avatar

User image or initials display with size and group variants.

Feature Card

Icon + title + description card for feature showcases.

Pricing Card

Pricing tier card with plan name, price, features, and CTA.

Team Member Card

Profile card with photo, name, role, and social links.

Testimonial Card

Customer quote card with avatar, name, and star rating.

FAQ Item

Single expandable Q&A item for FAQ sections.
Previous Avatar Next Feature Card