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

Default Button

There are four main button styles for each Color Theme option: Primary, Secondary, Tertiary, and Negative (Error State). In general, buttons are used for actions that occur on the page while links take users from one page to another. Depending on the importance of a link, you may decide to style it as a button to make it stand out more. Also shown here is the "disabled" button style.

Primary Button

Secondary Button

Tertiary Button

Negative Button

Primary Button

Secondary Button

Tertiary Button

Negative Button

Copied!

Overview

The Default Button pattern supports both buttons and links. Links are created automatically if the button_default_href attribute is passed. If omitted, the resulting output will be a button element.

To use one of the styles below, pass the "button_default_type" parameter to the desired style ("primary," "secondary," "tertiary," or "negative").

These button styles can also be applied to other button components by passing the desired classes (i.e. button--primary) to the pattern. See below for examples of using various button styles on other button components.

Parameters

button_default_classes: Additional button classes.
button_default_id: Button ID.
button_default_type: Button style.
- Options: primary, secondary, tertiary, negative.
button_default_label: Button text.
button_default_href: Button link destination (optional).
button_default_attributes: Additional button attributes.

Button Utilities

There may be situations where you will want smaller or larger buttons than the default NDS sizes. NDS has two utility classes that can be added to your buttons for a smaller and larger size:

button-nds--sm - A button with tighter padding.
button-nds--lg - A block that fills the full width of its container.

Dynamic Button

There are three button styles for each Color Theme option: Primary, Secondary, and Tertiary. In general, buttons are used for actions that occur on the page. This button should be used when the text and context of the button changes when the jQuery function "onClick" is performed.

Copied!

Overview

To use one of the styles below, pass the "button_dynamic_type" parameter to the desired style ("primary," "secondary," "tertiary," or "negative").

The following parameters must be defined for the atom to function as intended: "button_dynamic_active" and "button_dynamic_inactive".

Parameters

button_dynamic_classes: Additional button classes.
button_dynamic_id: Button ID.
button_dynamic_type: Button style.
- Options: primary, secondary, tertiary, negative.
button_dynamic_label: Button text.
button_dynamic_active: Button text to appear the while button is active.
button_dynamic_inactive: Button text to appear the while button is inactive.
button_default_attributes: Additional button attributes.

External Button

Used specifically for links to external sites displayed as a button.

Button

Copied!

Parameters

button_external_classes: Additional button classes.
button_external_id: Button ID.
button_external_text: Button text.
button_external_href: Button link destination.
button_external_icon: Font Awesome icon name (Default: external-link-alt).
button_external_icon_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default), 'b', 'l' (Pro-Only), 'd' (Pro-Only).
button_external_attributes: Additional button attributes.

Floating Button

In some instances, you may want to have a persistent button available to users at all times. For example a "Back to Top" button that returns users to the top of the page or the color palette button on this site that allows for theme customizations. For these purposes NDS provides the Floating Button pattern which is fixed at the lower right of the screen. To provide more clarity about its function the Floating Button expands on hover and focus to reveal button text.

Copied!

Overview

The width of the Floating Button on hover and focus depends on the width of the text. Out of the box, the Floating Button pattern's width is configured to work for "Back to Top" text. You may change this text but you will also likely need to change the default width and the width on hover and focus.

Parameters

button_floating_classes: Additional document button classes.
button_floating_id: Button ID.
button_floating_text: Button text.
button_floating_icon: Font Awesome icon name.
button_floating_icon_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default), 'b', 'l' (Pro-Only), 'd' (Pro-Only).
button_floating_aria_label: Button aria-label.

Button with Icon

This component allows users to include a Font Awesome icon inside an NDS button.

Copied!

Parameters

button_icon_classes: Additional button classes.
button_icon_id: Button ID.
button_icon_icon: Font Awesome icon name.
button_icon_icon_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default), 'b', 'l' (Pro-Only), 'd' (Pro-Only).
button_icon_icon_size: Size of the icon to display.
- Options: 'small' (Default) or 'large'.
button_icon_icon_position: The side of the button text the icon should appear.
- Options: "left" (Default) or "right"
button_icon_text: Button text.
button_icon_attributes: Additional button attributes.
button_icon_aria_label: Button aria-label.
button_icon_href: Button link destination.

Button with Image

This component allows for a small image, such as a user picture, to be included inside a button.

Copied!

Parameters

button_image_classes: Additional button classes.
button_image_id: Button ID.
button_image_href: Button link destination.
button_image_text: Button text.
button_image_src: The path to the image.
button_image_alt: Alt text to describe the image.
button_image_attributes: Additional button attributes.

Share Buttons

Share Buttons are useful for sharing site content to social media platforms. NDS provides buttons for several platforms and utilizes proper platform brand colors. The supported social media platforms are shown below.

Copied!

Parameters

button_share_classes: Additional button classes.
button_share_id: Button ID.
button_share_type: The classes to define the type of social media platform.
- Supported Options: "facebook", "twitter", "x-twitter", "linkedin", "instagram", "youtube", "pinterest", "flickr", "google-plus", "govdelivery", "generic". If using the "generic" type, you must manually specify a "button_share_icon".
button_share_icon_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default for Non-Social Media Platform Icons), 'b' (Default for Social Media Platforms).
button_share_href: Button link destination.
button_share_aria_label: Button aria-label.
button_share_tabindex: Button tabindex.
button_share_attributes: Additional button attributes.
button_share_govdelivery_img_src: The path to the GovDelivery icon. Default: The globally available GovDelivery icon.

Icons

NDS uses the Font Awesome library for all icons (with the exception of third-party applications and companies). In Font Awesome icons are selected using classes. The specific icon is selected with fa- class (e.g. fa-envelope). The style or weight of the icon is also specified using classes. The following icon weights and corresponding classes are available under the Font Awesome Free version:

Solid - fas
Brands - fab
Regular - fa/far

If you have access to Font Awesome Pro, a "Light" icon style (fal) and a Duotone icon style (fad) are also supported.

NDS makes using Font Awesome icons easy through its icon-default pattern. This pattern has two key parameters: icon_default_type and icon_default_weight. For the icon_default_type, simply pass the name of the icon (without the fa-). For weight, pass only the letter corresponding to the desired icon weight:

Solid - s
Brands - b
Regular - r
Light - l (Pro Only)
Duotone - d (Pro Only)

View the Font Awesome icon library.

NIAID's Office of Communications and Government Relations (OCGR) has a Font Awesome Pro license that may be used under certain circumstances. If you have a need for Font Awesome Pro, please contact OCGR to request access. If you have already received access and are looking for documentation on upgrading from Font Awesome Free, please see our Using Font Awesome Pro with NDS (NPM) guide.

Copied!

Parameters

icon_default_classes: Additional <i> tag classes.
icon_default_type: Font Awesome icon name.
icon_default_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default), 'b', 'l' (Pro-Only), 'd' (Pro-Only).
icon_default_sr_text: Optional text for screen readers only.
icon_default_attributes: Additional icon attributes.

Document Icons

Document icons can help users quickly identify document types. This component leverages the brand colors for each document type and applies them to the appropriate Font Awesome document icon.

Copied!

Overview

The Document Icon pattern can also be used as a button if a path is supplied to the "icon_document_href" parameter.

Use the "icon_document_type" parameter to choose a type as follows:

Word - "word"
Excel - "excel"
PowerPoint - "powerpoint"
PDF - "pdf"
Image - "image"
Video - "video"
Application - "application"
Link - "link"

Parameters

icon_document_classes: Additional document icon classes.
icon_document_id: Icon wrapper ID.
icon_document_type: Type of document icon.
- Options: 'word', 'excel', 'powerpoint', 'pdf', 'image', 'video', 'application', 'link'.
icon_document_href: Optional button link destination.
icon_document_aria_label: Aria Label for the document icon if it is linked (computed by the icon_document_type).
icon_document_icon_weight: Font Awesome icon weight.
- Options: 'r' (Default), 's', 'b', 'l' (Pro-Only), 'd' (Pro-Only).
icon_document_attributes: Additional icon attributes.

Icon Circle

This component can be useful for adding visual interest or additional meaning through iconography. We advise that icons be used only when their meaning is very clear.

Copied!

Parameters

icon_circle_classes: Additional pattern classes.
icon_circle_icon: Font Awesome icon name.
icon_circle_icon_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default), 'b', 'l' (Pro-Only), 'd' (Pro-Only).
icon_circle_attributes: Additional pattern attributes.

Icon Loader

The Icon Loader pattern from Materialize is used to provide visual feedback to users that the site is processing, receiving, or transmitting information.

Copied!

Parameters

icon_loader_classes: Additional pattern classes
icon_loader_size: The size of the loader.
- Options: "small" and "big" (Default)

Images

Copied!

Parameters

image_default_classes: Additional pattern classes
image_default_src: The path to the image.
image_default_alt: Alt text to describe the image.
image_default_width: The desired width of the image (Optional).
image_default_height: The desired height of the image (Optional).
image_default_attributes: Additional image attributes.

NIAID Logo

You must seek approval to use the NIAID logo on your website or application. If you are a NIAID or NIH employee, please review the Requesting the Use of the NIAID Logo page on NIAID's Intranet.

Copied!

Parameters

image_logo_classes: Additional pattern classes.
image_logo_id: Logo ID.
image_logo_src: The path to the image.
image_logo_alt: Alt text to describe the image.
image_logo_href: Logo link destination, usually "/".

NIAID Favicon

The NIAID favorite icon (favicon) is a small icon used to show your relation to NIAD within a user's preferred browser. The default shape of a favicon is square, and can be exported in the following formats: .jpg, .ico and .png. All current browsers and devices support 32x32 icons (recommended). Where applicable, the NIAID favicon should be used.

Download NIAID Favicons

Layouts

Site Layout

The Site Layout component provides a general framework for an NDS page using Twig block statements. The main regions defined in the pattern are header, global_navigation, hero, main, and footer. The block statements that define these regions are only visible in the Twig file. The HTML structure of Site Layout is very plain, allowing you to define your own markup with almost full flexibility.

Included in the Site Layout is a skip link that will direct users to the main content of the page for accessibility purposes. It is important to add an ID of value "main-content" to the first element on the page that appears after elements that are common to all pages, such as headers and navigation. This will help users who navigate with a keyboard or screen reader to easily move past redundant content. For more information on skip links, please visit the WCAG 2.0 documentation on skip links.

Copied!

Overview

The Site Layout component is generally embedded in a template or page to provide a page with structure. Content is passed and positioned within the layout with block statements. Blocks do not have to be defined and will not render unless content is passed.

Blocks

{% block header %}: Typically contains the website header.
{% block global_navigation %}: Typically contains the website's primary navigation.
{% block hero %}: Typically contains a hero component.
{% block main %}: Typically contains the main website content.
{% block footer %}: Typically contains the website footer.

Parameters

layouts_site_id: Layout ID.

Main Layout

The Main Layout component defines the major sections of an NDS page. The component provides three main columns: left, main, and right.

Copied!

Overview

The Main Layout component is generally embedded within the {% block main %} block of the Site Layout pattern. The main layout pattern has three possible columns for content but using all three is not required.

Blocks

{% block left_column %}: The content for the left column.
{% block main_column %}: The content for the main column.
{% block right_column %}: The content for the right column.

Parameters

layouts_main_classes: Additional layout classes.
layouts_main_id: Layout ID.
layouts_main_left: The number of columns (based on Bootstrap) for the left column.
- Options: "1" through "12".
layouts_main_main: The number of columns (based on Bootstrap) for the main column.
- Options: "1" through "12".
layouts_main_right: The number of columns (based on Bootstrap) for the right column.
- Options: "1" through "12".
layouts_main_breakpoint: The Bootstrap breakpoint for the layout columns.
- Options: "sm", "md", "lg" (Default), "xl".

Body Layout

The Body Layout component is used to display a page's main content. This component handles padding at various breakpoints, ensuring a visually appealing experience regardless of device or browser.

Copied!

Overview

The Body Layout component is generally embedded within the {% block main_column %} block of the Main Layout pattern.

Blocks

{% block body_content %}: The main page content.

Parameters

layouts_body_classes: Additional layout classes.
layouts_body_top_padding: A class indicating if top padding should be present or not.
- Options: "yes" (Default), "no".

Grid Layout

The Grid Layout component is used to display content that requires dynamic columns.

NIAID HIV Language Guide

NIAID is making every effort to eliminate the use of stigmatizing terminology and advance the use of person-first.

First Button Example

Second Button Example

Volunteer for Mpox Clinical Study

STOMP is an NIAID-funded clinical trial to evaluate the efficacy of the antiviral tecovirimat, also know as TPOXX.

Third Button Example

Fourth Button Example

Find Your Place at NIAID

Whether you are passionate about science, administration, or innovation, there is a place for you at NIAID.

Fifth Button Example

Sixth Button Example

Volunteer for COVID-19 Clinical Trials

NIAID conducts and supports clinical trials evaluating therapies and vaccine candidates against SARS.

Seventh Button Example

Eighth Button Example

NIAID HIV Language Guide

NIAID is making every effort to eliminate the use of stigmatizing terminology and advance the use of person-first.

First Button Example

Second Button Example

Volunteer for Mpox Clinical Study

STOMP is an NIAID-funded clinical trial to evaluate the efficacy of the antiviral tecovirimat, also know as TPOXX.

Third Button Example

Fourth Button Example

Find Your Place at NIAID

Whether you are passionate about science, administration, or innovation, there is a place for you at NIAID.

Fifth Button Example

Sixth Button Example

Volunteer for COVID-19 Clinical Trials

NIAID conducts and supports clinical trials evaluating therapies and vaccine candidates against SARS.

Seventh Button Example

Eighth Button Example

Copied!

Overview

The Grid Layout component defines the horizontal and vertical sections of a page. The component provides four equal column options: 2, 3, 4, and 5 columns.

Blocks

{% block layouts_grid %}: The Grid Layout content.
{% block layouts_grid_item %}: The Grid Layout item content.

Parameters

layouts_grid_id: Additional Grid Layout id.
layouts_grid_classes: Additional Grid Layout classes.
layouts_grid_count: Determines how many columns will display in a given row.
- Options: '2' (Default), '3', '4', '5'.
layouts_grid_spacing: Determines the amount of spacing between columns and rows in a Grid Layout.
- Options: 'none', 'tight', 'default' (Default).
layouts_grid_data: The variable used to identify a list of objects in a Grid Layout.

Links

Links are used to take website users from page to page. NDS uses a bottom-border instead of an underline to make links look more elegant.

Default Link

The Default Link pattern can be used to build generic links.

Ronsectetur adipisicing elit

Copied!

Parameters

link_default_classes: Additional link classes.
link_default_href: The link destination path.
link_default_text: The text of the link.
link_default_attributes: Additional link attributes.

External Link

NDS requires that all external links — links that direct users away from the current site they are viewing — are designated with the Font Awesome external link icon. Out of the box NDS uses JavaScript to automatically append these icons. A notable exception to this policy is links to social media (e.g. Facebook, Instagram, X, etc.) when they are presented in the form of a button.

National Institute of Allergy and Infectious Diseases
Email Us
Call Us
Example PDF

Copied!

Link with Icon

A link pattern that allows for an icon to be included with the link text.

Facebook

Copied!

Parameters

link_icon_classes: Additional link classes.
link_icon_href: The link destination path.
link_icon_text: The text of the link.
link_icon_sr_text: Text to be read by screen readers only (not displayed visually).
link_icon_position: The side of the text the icon will appear on.
- Options: "left" (Default), "right".
link_icon_type: Font Awesome icon name.
link_icon_weight: Font Awesome icon weight.
- Options: 'r', 's', 'b', 'l' (Pro-Only), 'd' (Pro-Only).
link_icon_icon_classes: Additional classes for the icon.

Lists

Links List

A pattern used to generate a list of links. The links may optionally include icons.

Copied!

Overview

This pattern can be used to generate a list of links with or without icons. To include icons, all icon parameters must be supplied as part of the list_links_data objects.

Parameters

list_links_classes: Additional list classes.
list_links_data: An array of link objects.
- Structure: {"text": "", "href": "", "icon": "", "weight": "", "position": ""}. Position options should be either "left" or "right".
list_links_type: The type of list to generate.
- Options: "ul" (Default), "ol".

Includes

Atoms -> Links -> link-icon
Atoms -> Links -> link-default

Media

Audio and video can be effective ways to communicate with your audience, however each comes with a variety of accessibility requirements. Please review the guidelines from W3C on how to make your audio or video accessible.

YouTube Video

The Media YouTube Video component makes it easy to embed YouTube videos on your website.

Copied!

Overview

The "media_video_youtube_src" parameter requires a specific embed URL from YouTube (not to be confused with the regular URL to the video page). To get this embed link, go to the YouTube video you would like to embed. Select "Share" below the video, then "Embed". The needed URL is found as the value for the "src" attribute in the displayed embed code.

Parameters

media_video_youtube_classes: Additional media element classes.
media_video_youtube_id: ID for the video wrapper.
media_video_youtube_title: The title attribute for the video.
media_video_youtube_src: The embed URL from YouTube.
media_video_youtube_height: Desired height of the video.
media_video_youtube_width: Desired width of the video.
media_video_youtube_attributes: Additional attributes on the <iframe>.

Tables

Tables on the web can be challenging in terms of accessibility and responsiveness. NDS employs DataTables to create properly formatted, simple tables to improve the experience of tables across devices. Adding the custom attribute nds-datatable="true" to the table tag will initialize the responsive functionality of Datatables.

Dependencies:

In order to leverage the full capabilities of this component, you must include the following libraries in addition to the NDS Global JS:

DataTables jQuery

Example Caption
Name	Position	Office	Location	Phone	Email
Name	Position	Office	Location	Phone	Email
Name	Position	Office	Location	Phone	Email
Name	Position	Office	Location	Phone	Email

Example Caption
Name	Position	Office	Location	Phone	Email
Name	Position	Office	Location	Phone	Email
Name	Position	Office	Location	Phone	Email
Name	Position	Office	Location	Phone	Email

Copied!

Text

Blockquote

Blockquotes are useful to separate quotations from the rest of the body text, adding visual interest to pages and highlighting the quotation.

A block quotation (also known as a long quotation or extract) is a quotation in a written document that is set off from the main text as a paragraph, or block of text and typically distinguished visually using indentation and a different typeface or smaller size font.

Copied!

Parameters

text_blockquote_classes: Additional blockquote classes.
text_blockquote_id: Blockquote ID.
text_blockquote_text: Blockquote text.

Badge (Tag)

Badges (tags) are static, non-functional indicators of information. Typically badges are used to showcase tags and metadata of certain components such as search results.

Badge Example

Copied!

Parameters

text_badge_classes: Additional badge classes.
text_badge_id: Badge ID.
text_badge_text: Badge text.

Date

Dates are static, non-functional indicators of a desired date. Typically dates are used to indicate the date of an event.

18Jun

Copied!

Parameters

text_date_classes: Additional date classes.
text_date_day: The day to display, formatted DD.
text_date_month: The month to display, formatted as the first three letters of the month name (Ex. January = Jan).

Chip

Chips are functional indicators of search and filter results. NDS uses a search style which displays selected filters as chips, allowing users to see exactly which terms they have searched and filtered on. Selecting the 'x' in the chip removes the term from the search.

Chip Example

Copied!

Parameters

text_chip_classes: Additional chip classes.
text_chip_id: Chip ID.
text_chip_text: Chip text.
text_chip_href: A URL that, when navigated to, removes the chip from the filter list.
text_chip_icon_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default), 'b', 'l' (Pro-Only), 'd' (Pro-Only).

Includes

Atoms -> Icons -> icon-default

Heading with Icon

This component allows users to include a Font Awesome icon next to a heading.

Heading Icon Example

Copied!

Parameters

text_heading_icon_classes: Additional heading classes.
text_heading_icon_id: Heading ID.
text_heading_level: The heading level.
- Options: "1" through "6".
text_heading_text: The heading text.
text_heading_icon: Font Awesome icon name.
text_heading_icon_weight: Font Awesome icon weight.
- Options: 'r', 's' (Default), 'b', 'l' (Pro-Only), 'd' (Pro-Only).
text_heading_icon_position: The side of the heading text that the icon appears on.
- Options: "left" (Default), "right".

Includes

Atoms -> Icons -> icon-default

Image Credit & Caption

We strongly suggest captioning and crediting your images to bolster accessibility and properly cite sources. The easiest way to use this pattern is by leveraging the Media Component (molecule: component-media), negating the need to use this pattern on its own.

A Picture of the Novel Coronavirus

Credit: NIAID

A Picture of the Novel Coronavirus

Credit: NIAID

Copied!

Parameters

text_image_credit_caption_classes: Additional credit and caption classes.
text_image_credit_caption_id: Credit and caption ID.
text_image_credit_caption_caption: Caption text.
text_image_credit_caption_credit: Credit text.
text_image_credit_caption_credit_label: Label for the credit. Default: "Credit:".

Search Results

When displaying a set of search results, it is a best practice to include the total number of results returned. The Search Results component provides a display for this purpose. Place this component directly above the listing of search results.

65 Results

Copied!

Parameters

text_search_results_classes: Additional search results display classes.
text_search_results_title_text: Label for the search results. Default: "Results".
text_search_results_title_level: The heading level for the results display. Default: "2".
text_search_results_title_number: A string of the number of results.

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

Previous
Components

Up Next
Molecules