...
Element | Description | Mobile | Web | |
|---|---|---|---|---|
Avatar | ||||
Badge (tag) | ||||
Button | (covers glossary) | |||
Checkbox | ||||
Heading | ||||
Text | ||||
Icon | ||||
Image | ||||
Label (form label) | ||||
Link (hyperlink) | ||||
Radio button | ||||
Spinner (loading)Text input | Text area | |||
Tooltip | ||||
Separator (divider) | ||||
Toggle | ||||
PIN Input | ||||
Rating | ||||
Molecules
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search form.
Element | Description | Mobile | Web |
|---|---|---|---|
Money input | Yes | Yes | |
Search input | Yes | No | |
Phone number input | |||
Date input | |||
Date of birth input | |||
Select input | |||
Text input | |||
Text area | |||
Keypad | |||
Time picker input (optional) | |||
Organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. They form distinct sections of an interface, like a product grid or a site header with a logo, primary navigation, and search form.
Element | Description | Mobile | Web |
|---|---|---|---|
Card banner | Yes | Yes | |
Action List | No | Yes | |
File upload | Yes | Yes | |
Image upload | |||
Calender (optional) | |||
Templates
At this level, you’re essentially laying out the structure of a page. You’re positioning organisms (or groups of organisms) in a layout, showing content structure without focusing too much on the actual content.
...