What is Atomic Design Pattern?

Atoms

Basic building blocks in HTML tags, such as a form label, an input or a button.

Molecules

Grouping atoms together, such as combining a button, input and form label to build functionality.

For example, a form label, input or button aren’t too useful by themselves, but combining them together as a form and now they can actually do something together.

Organisms

Combining molecules together to form organisms that make up a distinct section of an interface (i.e. navigation bar)

Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and a list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.

Templates

Consisting mostly of groups of organisms to form a page, where clients can see a final design in place.

Pages

Pages are specific instances of templates.  An ecosystem that views different template renders. We can create multiple ecosystems into a single environment: the application.