Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

These are the basic building blocks, analogous to atoms in the physical world. In terms of web interfaces, atoms can be HTML tags, such as labels, inputs, buttons, or other elemental parts like colour swatches and typographic styles. They are not useful on their own but when combines, they become the foundation of your UI.

ComponentElement

Description

Mobile

Web

Button

(covers glossary)

  •  
  •  

Icon

  •  
  •  

...

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.

ComponentElement

Description

Mobile

Web

  •  
  •  

  •  
  •  

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.

ComponentElement

Description

Mobile

Web

  •  
  •  

  •  
  •  

Templates

...