ForgeForge

Card

15+ 种卡片组件：StatCard 系列 / 金融卡 / Project / Task / User / Event / Profile / Highlight / Activity。

Regular Statistic Card

8 种 theme × 2 size（sm 258×152 / lg 360×264）。trend up/down + icon + kebab。

Themes (sm)

Total Sale
$9,256.09
2.1%
vs. last week
white
Total Sale
$9,256.09
2.1%
vs. last week
black
Total Sale
$9,256.09
2.1%
vs. last week
purple
Total Sale
$9,256.09
2.1%
vs. last week
blue
Total Sale
$9,256.09
2.1%
vs. last week
green
Total Sale
$9,256.09
2.1%
vs. last week
red
Total Sale
$9,256.09
2.1%
vs. last week
yellow
Total Sale
$9,256.09
2.1%
vs. last week
cyan

Themes (sm, with icon)

Orders
1,245
4.3%
this week
white
Orders
1,245
4.3%
this week
black
Orders
1,245
4.3%
this week
purple
Orders
1,245
4.3%
this week
blue
Orders
1,245
4.3%
this week
green
Orders
1,245
4.3%
this week
red
Orders
1,245
4.3%
this week
yellow
Orders
1,245
4.3%
this week
cyan

Themes (lg, with icon + kebab)

Total Sale
$9,256.09
2.1%
vs. last week
white
Total Sale
$9,256.09
2.1%
vs. last week
black
Total Sale
$9,256.09
2.1%
vs. last week
purple
Total Sale
$9,256.09
2.1%
vs. last week
blue
Total Sale
$9,256.09
2.1%
vs. last week
green
Total Sale
$9,256.09
2.1%
vs. last week
red
Total Sale
$9,256.09
2.1%
vs. last week
yellow
Total Sale
$9,256.09
2.1%
vs. last week
cyan

Progress Statistic Card

下方带进度条的 StatCard，8 themes。

Themes (sm)

Orders
1,245
4.3%
white
Orders
1,245
4.3%
black
Orders
1,245
4.3%
purple
Orders
1,245
4.3%
blue
Orders
1,245
4.3%
green
Orders
1,245
4.3%
red
Orders
1,245
4.3%
yellow
Orders
1,245
4.3%
cyan

Line Chart Statistic Card

右侧带迷你折线图。

Themes (sm)

Revenue
$12.4k
8.7%
white
Revenue
$12.4k
8.7%
black
Revenue
$12.4k
8.7%
purple
Revenue
$12.4k
8.7%
blue
Revenue
$12.4k
8.7%
green
Revenue
$12.4k
8.7%
red
Revenue
$12.4k
8.7%
yellow
Revenue
$12.4k
8.7%
cyan

Chart colors (white theme)

Revenue
$12.4k
8.7%
purple
Revenue
$12.4k
8.7%
blue
Revenue
$12.4k
8.7%
green
Revenue
$12.4k
8.7%
red
Revenue
$12.4k
8.7%
orange
Revenue
$12.4k
8.7%
yellow
Revenue
$12.4k
8.7%
cyan

Wheel Chart Statistic Card

右侧圆环进度图。

Themes (sm)

Completion
72%
3.2%
white
Completion
72%
3.2%
black
Completion
72%
3.2%
purple
Completion
72%
3.2%
blue
Completion
72%
3.2%
green
Completion
72%
3.2%
red
Completion
72%
3.2%
yellow
Completion
72%
3.2%
cyan

Wheel colors (white theme, 70%)

Completion
70%
purple
Completion
70%
blue
Completion
70%
green
Completion
70%
red
Completion
70%
orange
Completion
70%
yellow
Completion
70%
cyan

Bar Chart Statistic Card

右侧 5 根柱状图。

Themes (sm)

Daily Sales
$2.1k
12%
white
Daily Sales
$2.1k
12%
black
Daily Sales
$2.1k
12%
purple
Daily Sales
$2.1k
12%
blue
Daily Sales
$2.1k
12%
green
Daily Sales
$2.1k
12%
red
Daily Sales
$2.1k
12%
yellow
Daily Sales
$2.1k
12%
cyan

Bar colors (white theme)

Daily Sales
$2.1k
12%
purple
Daily Sales
$2.1k
12%
blue
Daily Sales
$2.1k
12%
green
Daily Sales
$2.1k
12%
red
Daily Sales
$2.1k
12%
orange
Daily Sales
$2.1k
12%
yellow
Daily Sales
$2.1k
12%
cyan

Image Statistic Card

大面积背景 + 头像组，用作 campaign/collection 卡。

Themes

Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
white
Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
black
Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
purple
Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
blue
Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
green
Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
red
Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
yellow
Marketing ROIJul 2024 - Today
$18,420
12.5%
+$150 today
cyan

Balance Card

余额 + transfer/request 按钮。8 themes × 可选 balanceHidden。

Themes

**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
white
**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
black
**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
purple
**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
blue
**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
green
**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
red
**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
yellow
**** 9090
Total Balance
$9,256.09
2.1%
vs. last month
cyan

Balance hidden (white / purple)

**** 9090
Total Balance
$*****
2.1%
vs. last month
white (hidden)
**** 9090
Total Balance
$*****
2.1%
vs. last month
purple (hidden)

Debit & Credit Card

银行卡视觉：balance / number / expiry。8 种 financial theme × 2 variant (glow / orbs)。

Debit Card - Themes (glow)

Balance$9,256.09
**** 909007/25
dark
Balance$9,256.09
**** 909007/25
purple
Balance$9,256.09
**** 909007/25
blue
Balance$9,256.09
**** 909007/25
yellow
Balance$9,256.09
**** 909007/25
cyan
Balance$9,256.09
**** 909007/25
green
Balance$9,256.09
**** 909007/25
orange
Balance$9,256.09
**** 909007/25
red

Credit Card - Themes (glow)

Number**** **** **** 4242424242429090
NameJohn Doe
07/25
dark
Number**** **** **** 4242424242429090
NameJohn Doe
07/25
purple
Number**** **** **** 4242424242429090
NameJohn Doe
07/25
blue
Number**** **** **** 4242424242429090
NameJohn Doe
07/25
yellow
Number**** **** **** 4242424242429090
NameJohn Doe
07/25
cyan
Number**** **** **** 4242424242429090
NameJohn Doe
07/25
green
Number**** **** **** 4242424242429090
NameJohn Doe
07/25
orange
Number**** **** **** 4242424242429090
NameJohn Doe
07/25
red

Variants (purple)

Balance$9,256.09
**** 909007/25
glow
Balance$9,256.09
**** 909007/25
gradient
Balance$9,256.09
**** 909007/25
flat

Progress Card

大圆环进度 + 列表项明细。环色跟 theme 走。

Themes

Goals
72%On track
Done
24
In Progress
8
Not Started
2
white
Goals
72%On track
Done
24
In Progress
8
Not Started
2
black
Goals
72%On track
Done
24
In Progress
8
Not Started
2
purple
Goals
72%On track
Done
24
In Progress
8
Not Started
2
blue
Goals
72%On track
Done
24
In Progress
8
Not Started
2
green
Goals
72%On track
Done
24
In Progress
8
Not Started
2
red
Goals
72%On track
Done
24
In Progress
8
Not Started
2
yellow
Goals
72%On track
Done
24
In Progress
8
Not Started
2
cyan

Project Card

白底卡：logo + title + label + progress + avatars + date。

Variants

Design
Marketing Website Redesign
Revamp the landing page with new brand.
Progress65%
Due Aug 15
with logo + progress
Engineering
Mobile App v2
Ship the new onboarding flow.
Progress40%
Due Sep 10
no logo + green

Task Card

任务卡：label + title + progress + avatars + date。label 跟进度条主题色一致。

Variants

Priority
Ship beta release
Roll out to 10% of users.
Progress60%
Tomorrow
purple
Priority
Ship beta release
Roll out to 10% of users.
Progress60%
Tomorrow
blue
Priority
Ship beta release
Roll out to 10% of users.
Progress60%
Tomorrow
green
Priority
Ship beta release
Roll out to 10% of users.
Progress60%
Tomorrow
red
Priority
Ship beta release
Roll out to 10% of users.
Progress60%
Tomorrow
yellow
Priority
Ship beta release
Roll out to 10% of users.
Progress60%
Tomorrow
cyan
Priority
Ship beta release
Roll out to 10% of users.
Progress60%
Tomorrow
gray

User Card

头像 / initials + 名字 + badge + stats。

Variants

John Doe
Product Designer
Projects
24
Tasks
156
avatar + stats
AB
Ada Byron
Engineer
initials purple
AB
Ada Byron
Engineer
initials blue
AB
Ada Byron
Engineer
initials green
AB
Ada Byron
Engineer
initials orange
Linda Blair
Operations
checked (selected)

Event Card

日历事件卡：title + timeRange + avatars + bottom accent。8 色。

Colors

Weekly Standup
10:00 - 10:30 AM
purple
Weekly Standup
10:00 - 10:30 AM
blue
Weekly Standup
10:00 - 10:30 AM
black
Weekly Standup
10:00 - 10:30 AM
red
Weekly Standup
10:00 - 10:30 AM
yellow
Weekly Standup
10:00 - 10:30 AM
green
Weekly Standup
10:00 - 10:30 AM
cyan
Weekly Standup
10:00 - 10:30 AM
orange

Profile Card

会员 / 人员卡，idle / hover / selected 3 态 × accent 色。

States (purple)

idle
hover
selected

On colored bg

Highlight Card

产品高亮卡：主图 + 标注气泡 + 推荐列表。

Purple theme

Featured Product

MaterialLeather
ColorBrown
Bag A
Leather
$120
Bag B
Canvas
$89

Activity Card

时间线卡：icon + 标题 + 元数据。

Default

Payment Received
2 hours ago
John Doe paid $1,250Invoice #302012 for Marketing services
Amount$1,250
MethodMastercard
StatusCompleted

Custom Action Slot

StatCard / ImageStatCard 的 action prop 可插任意 ReactNode（如 IconButton）。

StatCard (action = IconButton)

Team Size
48