Molecule Example

"Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule."

University of Michigan - Ann Arbor

Georgetown University

Atomic design is a design ideology that breaks down the elements of an interface into smaller, generalizable features using
- Atoms
- Molecules
- Organisms
- Templates 
- Pages

Atomic Design

Atomic Design by Brad Frost. 
atomicdesign.bradfrost.com

Atomic Design, Brad Frost

"Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure."

This homepage template displays all the necessary page components functioning together, which provides context for these relatively abstract molecules and organism and focus on the page’s underlying content structure rather than the page’s final content



Templates

"Pages are specific instances of templates that show what a UI looks like with real representative content in place."

pages are essential for testing the effectiveness of the underlying design system.

Pages

"Atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional."

Atoms demonstrate all your base styles at a glance

Atoms (in Design)

"Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms."

Learn Before

Related

Learn After