Design System
v1.5.0
NDS on GitHub
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.
Global
The Global Organisms are comprised of the Header and Footer components. Together, these components add familiarity and consistency to NDS websites.
Header
The header is one of the first things users will see when visiting your site. Therefore, it is important to ensure that NDS websites communicate a clear and consistent brand through their headers. Headers typically consist of site branding and key navigation. The NDS Header component demo includes a menu button, site branding, a search field, and a button used to toggle the mobile menu. Since every website is different, you will likely need to create your own copy of the Header component to suit your website. Remember that custom components should be placed outside the 00-nds/ directory.
Read more guidance about headers from the U.S. Web Design System
Blocks
- {% block global_header_content %}: The block holding the global header markup. Can be used to replace all the default content in the header.
Parameters
- global_header_classes: Additional classes for the header.
- global_header_id: The header ID.
- global_header_product_id_top: The top line of the product identity.
- global_header_product_id_bottom: The bottom line of the product identity.
- global_header_logo_src: Path to the website logo.
- global_header_logo_alt: Alternative text to describe the website logo.
- global_header_logo_src_mobile: Path to the mobile version of the website logo.
- global_header_logo_alt_mobile: Alternative text to describe the mobile version of the website logo.
Includes
- Atoms -> Buttons -> button-icon
- Molecules -> Components -> component-branding
Footer
Website footers are often used to provide supplemental information to site users, such as contact information or related resources. The NDS footer demo provides suggested links for inclusion in the footer, however these can change based on the site's needs.
Read more guidance about footers from the U.S. Web Design System
Blocks
- {% block global_footer_content_left %}: The block containing content for the left-most column.
- {% block global_footer_content_middle %}: The block containing content for the middle column.
- {% block global_footer_content_right %}: The block containing content for the right-most column.
- {% block global_footer_prefooter_content %}: The block containing content to appear at the top of the footer.
- {% block global_footer_tagline %}: The block containing an optional website tagline or copyright notice.
Parameters
- global_footer_classes: Additional classes for the footer.
- global_footer_logo_src: The URL path of the website logo. Default: "global/niaid/logo-niaid-white.svg"
- global_footer_logo_alt: The top line of the product identity. Default: "NIAID Logo"
- global_footer_column_left: The Bootstrap 4 class corresponding to the column for the left column. Default: "col-lg-4".
- global_footer_column_middle: The Bootstrap 4 class corresponding to the column for the middle column. Default: "col-lg-4".
- global_footer_column_right: The Bootstrap 4 class corresponding to the column for the right column. Default: "col-lg-4".
Includes
- Atoms -> Icons -> icon-default
Views
The term "view" comes from Drupal terminology and refers to a collection of Blocks or Components. NDS offers two types of views out of the box — a generic listing view and a view for featured content.
Listing View
The Listing View is a very versatile component that allows users to present sets of content. For instance, search results are the perfect use case for this component. The Listing View optionally supports a heading and a "See All" button following the display.
View Listing
View Listing Heading
Lorem ipsum set amet dolor.
View Listing Heading
Lorem ipsum set amet dolor.
View Listing Heading
Lorem ipsum set amet dolor.
View Listing
View Listing Heading
Lorem ipsum set amet dolor.
View Listing Heading
Lorem ipsum set amet dolor.
View Listing Heading
Lorem ipsum set amet dolor.
Blocks
- {% block view_listing_heading %}: The block containing the list view heading.
- {% block view_listing_content %}: The block containing the list view content.
- {% block view_listing_button %}: The block containing the optional list view button.
Parameters
- view_listing_classes: Additional classes for view wrapper.
- view_listing_id: ID for the view.
- view_listing_data: An array of default block objects. Structure: { "content": "" }. The "content" should be an HTML string.
- view_listing_heading: Heading text to label the view listing.
- view_listing_heading_level: Heading level for the view listing header. Default: "2".
- view_listing_button_text: Text to appear on an optional button at the end of the view.
- view_listing_button_href: URL destination for an optional button at the end of the view.
Includes
- Molecules -> Blocks -> block-default
- Atoms -> Buttons -> button-default
Featured Content Cards View
Featured Content Cards are excellent for highlighting information, but too many can be overwhelming and reduce the relative importance of each card. We recommend no more than two or three cards be used with the Featured Content Cards View.
FEATURED
What is a Clinical Study?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
NEW
Breaking News: This Just In
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
NEW
Breaking News: This Just In
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FEATURED
What is a Clinical Study?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
NEW
Breaking News: This Just In
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
NEW
Breaking News: This Just In
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Overview
To implement the Featured Content Card use the {% block view_featured_content_cards_content %} or pass data to the "view_featured_content_cards_data" parameter. If using the parameter, the component will calculate the correct width of the Bootstrap columns ("view_featured_content_cards_column_width") based on the number of card objects passed therefore negating the need to specify a value for "view_featured_content_cards_column_width".
Blocks
- {% block view_featured_content_cards_content %}: The block containing featured content cards.
Parameters
- view_featured_content_cards_classes: Additional classes for view wrapper.
- view_featured_content_cards_id: ID for the view.
- view_featured_content_cards_data: An array of featured content card objects. Structure: {"src": "", "alt": "", "title": "", "href": "", "description": "", "featured": ""}. See the Featured Content Card pattern for more information.
- view_featured_content_cards_column_breakpoint: The Bootstrap column breakpoint for the view.
- Options: "sm", "md" (Default), "lg", "xl".
- view_featured_content_cards_column_width: The Bootstrap column width for the view.
- Options: "1", "2", "3", "4", "6" (Default), "12".
Includes
- Molecules -> Blocks -> block-featured-content-card
Event Listing View
The Event Listing View is a component that allows users to present events in a listing format. The Event Listing View optionally supports a heading and a "See More" link following the listing of events.
Upcoming Events
1Jan
Data Sharing and Reuse Seminar
Sun, January 1, 2023, 9:00 a.m. - 12:00 p.m.
15Jun
Making Metadata FAIR
Tue, June 15, 2023, 9:00 a.m. - 12:00 p.m.
30Dec
The Multiscale Modeling Consortium celebrates 20 years of IMAG: Lessons from the past that guide the future
Sat, December 30, 2023, 9:00 a.m. - 12:00 p.m.
Upcoming Events
1Jan
Data Sharing and Reuse Seminar
Sun, January 1, 2023, 9:00 a.m. - 12:00 p.m.
15Jun
Making Metadata FAIR
Tue, June 15, 2023, 9:00 a.m. - 12:00 p.m.
30Dec
The Multiscale Modeling Consortium celebrates 20 years of IMAG: Lessons from the past that guide the future
Sat, December 30, 2023, 9:00 a.m. - 12:00 p.m.
Blocks
- {% block view_event_listing_content %}: The block containing the events and their content.
- {% block view_event_listing_link %}: The block containing the link meant to view more events.
Parameters
- view_event_listing_classes: Additional classes for view wrapper.
- view_event_listing_id: ID for the view.
- view_event_listing_data: An array of event block objects. Structure: { "content": "" }. The "content" should be an HTML string.
- view_event_listing_heading: Heading text to label the view.
- view_event_listing_link_text: Text to appear on an optional "See More" link at the end of the view.
- view_event_listing_link_href: URL destination for an optional "See More" link at the end of the view.
Includes
- Molecules -> Blocks -> block-default
- Atoms -> Links -> link-icon
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