History

HistoryItem × 3 variants × 8 colors × 4 structure cols × 6 content rows · HistoryGrouped

1. Regular

variant=regular · 圆点 indicator

Indicator · 8 colors (single row example)

Title · purple
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · blue
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · green
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · red
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · yellow
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · cyan
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · gray
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · black
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow

Full matrix · 4 structure cols × 6 content rows (purple)

inline + connector
bottom + connector
inline · no connector
bottom · no connector
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
4.0/5
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
4.0/5
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
Title
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
Title
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
DD/MM/YY, 00:00

2. Badge

variant=badge · icon 徽章 indicator

Indicator · 8 colors (single row example)

Title · purple
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · blue
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · green
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · red
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · yellow
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · cyan
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · gray
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title · black
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow

Full matrix · 4 structure cols × 6 content rows (purple)

inline + connector
bottom + connector
inline · no connector
bottom · no connector
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
4.0/5
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
4.0/5
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
Title
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
Title
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
DD/MM/YY, 00:00

3. Profile

variant=profile · 头像 indicator

Full matrix · 4 structure cols × 6 content rows (purple)

inline + connector
bottom + connector
inline · no connector
bottom · no connector
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
RedYellow
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
4.0/5
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
4.0/5
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
Title
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
DD/MM/YY, 00:00
Title
DD/MM/YY, 00:00
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
Title
Lorem #302012 ipsum dolor si amet
Label
Title Here
Progress0%
+1
21 Oct 2022
DD/MM/YY, 00:00

4. HistoryGrouped

Card 容器 + 右侧 progress bar · color 强制透给内部 items

3 colors × 3 items composition

TitlePurple
Text Here
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
TitleBlue
Text Here
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
TitleBlack
Text Here
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00

Items composition variants (purple)

Short list3
3 items · 20% progress
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Mixed variants6
6 items · 50% progress
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
4.0/5
DD/MM/YY, 00:00
With action5
5 items · 80% · header action
Title
Lorem #302012 ipsum dolor si amet
RedYellow
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
doc
File Name.doc
300 KB
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
DD/MM/YY, 00:00
Title
Lorem #302012 ipsum dolor si amet
Product Title3 Variant
DD/MM/YY, 00:00