...
Element | Description | Mobile | Web | ||
|---|---|---|---|---|---|
Avatar | |||||
Badge (tag) | |||||
Button | (covers glossary) | ||||
Checkbox | |||||
Heading | |||||
Icon | |||||
Image | |||||
Label (form label) | |||||
Link (hyperlink) | |||||
Radio button | |||||
Spinner (loading) | |||||
Text input | |||||
Text area | |||||
Tooltip | |||||
Separator (divider) | |||||
...
Element | Description | Mobile | Web | |||
|---|---|---|---|---|---|---|
Yes | Yes | |||||
Yes | No | |||||
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 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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.
...