Anatomy
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Container |
Holds the component content. |
|
|
|
2 |
Pictogram |
It is a decorative element related to the content, literally or metaphorically. |
|
|
|
3 |
Title |
It’s a brief identification of the problem. |
|
|
|
4 |
Description |
It provides an explanation and guidance on what steps to take next. |
|
Yes |
|
5 |
Action slot |
A designated space for including interactive elements like Buttons or Links. |
Yes |
Specification and properties
Sizing
The Empty State component offers two sizes to fit different placements within the interface. To learn more about each variant’s purpose, please refer to the guidelines in the Usage tab.
|
Size |
Item |
Property |
Value |
Token |
|---|---|---|---|---|
|
Large |
Container |
padding |
24px |
spacing.300 |
|
|
|
gap |
24px |
spacing.300 |
|
|
Pictogram |
size |
Large |
|
|
|
|
margin-bottom |
16px |
spacing.200 |
|
|
Title |
font-style |
- |
body.large-strong |
|
|
|
margin-bottom |
8px |
spacing.100 |
|
|
Description |
font-style |
- |
body.medium |
|
|
Button |
size |
Medium |
|
|
|
Link |
size |
Medium |
|
|
Medium |
Container |
padding |
24px |
spacing.300 |
|
|
|
gap |
16px |
spacing.200 |
|
|
Pictogram |
size |
medium |
|
|
|
|
margin-bottom |
12px |
spacing.150 |
|
|
Title |
font-style |
- |
body.medium-strong |
|
|
|
margin-bottom |
0x |
spacing.0 |
|
|
Description |
font-style |
- |
body.small |
|
|
Button |
size |
Small |
|
|
|
Link |
size |
Small |
|