@akello/react v0.0.24

Akello Component Library

Atomic Design

Reference: https://blogs.halodoc.io/atomic-design-system-implementation-at-halodoc/

• Atoms - Atoms are the smallest component found in a product or system. These usually include links, buttons, inputs, paragraphs, titles, icons, and labels.
• Molecules - Molecules are combinations of atoms. They can include navigation lists, input groups, text groups, and other structures made up of multiple atoms.
• Organisms - Organisms, again, are larger than atoms and molecules. They are a combination of molecules or atoms and molecules. Organisms can include banners, call-to-action sections, footers, headers, forms, and any large structure you find on the page.
• Templates - Templates are a typical layout pattern that you find system-wide. For example, a blog post will have a template and a product page also will have a template. A template is a page with a standard layout consisting of organisms and molecules.
• Pages - Lastly, pages are the highest-level methodological concepts. Pages are unique layouts that don't need to be repeated throughout your app. The difference between pages and templates is that templates don’t provide any content.