Design System
v1.5.0
NDS on GitHub
Components
NIAID Design System components are simple web patterns that can be used on any type of project. Since NDS uses the Atomic Design philosophy, the components are broken out into Atoms, Molecules, and Organisms. For each component, we have added documentation to support your development. Be sure to include the NDS CSS and JS files in your project!
NDS Components
Atoms
The NIAID Design System uses the Atomic Design philosophy to organize and manage components. Atomic Design is the principle of breaking down web components into their most basic elements and combining those elements to create more complex structures. The most basic building blocks of web elements, such as colors, fonts, and buttons, are called Atoms.
Buttons are small input elements that direct users to important actions.
Icons can enhance meaning through careful selection.
Images can provide visual interest and tell stories.
Layouts define a page's structure and organization.
Links allow users to move between pages and sections of a website.
Lists present sets of content in a simple format.
Media can enhance engagement by presenting content in different ways.
Tables organize data into a readable format.
Text communicates ideas through the written word.
Molecules
Molecules are more complicated web components formed by combining Atom components together. Molecules typically include blocks, functional components, and navigation elements.
Blocks are stylized content that are designed to draw attention.
Components typically include functionality to help a website function.
Input Groups are complete form elements designed to take input from users.
Forms are sets of input elements that add functionality to a site.
Navigation elements help users interact with and move around a site.
Organisms
Organisms are the last level of web components in Atomic Design, and are composed of Molecules (and Atoms). Organisms include "global" elements, like a website header and footer.
Ask Questions, Report Issues, Stay Informed
For questions about the NIAID Design System or to report issues, please visit the Issues tab of the NDS repository on GitHub. To get updates on NDS features and changes, please add yourself as a "Watcher" on the NDS GitHub repository.
NDS on GitHub