Design and Components
Clean design, professional photography, an intuitive interface, a contrasting color palette, and clear typography support our brand throughout NLR.gov.
The design philosophy for NLR.gov is based on four priorities: responsive design, reusable components, touchability, and accessibility.
Responsive Design
NLR.gov is designed to provide an optimal user experience across a spectrum of devices. We use responsive design principles to ensure our interface is mobile-friendly. All content, navigation, and interface elements are designed to work for all screen sizes. This ensures that the most important elements and information are prioritized and available to all users, whether they are visiting on a desktop monitor, tablet, or smartphone.
To achieve this, NLR.gov leverages the Bootstrap 5 framework to incorporate the three essential pillars of responsive design:
- Media queries: We use Bootstrap 5 grid breakpoints (xs, sm, md, lg, xl, and xxl) to dynamically adjust layouts based on the visitor's device width, ensuring optimization for both mobile phones and ultra-wide desktop monitors.
- Flexible media: Images and other media automatically resize to adapt to screen widths using Bootstrap's responsive utilities, including support for @2x assets to ensure clarity on high-resolution and retina screens.
- Fluid grids: Layouts adapt dynamically using Bootstrap 5's flexbox-powered grid system, which serves as the foundation for our highly adaptable web components.
Reusable Components
Components are the modular building blocks of NLR.gov, designed to create a consistent and engaging user experience. Authors can easily organize pages by mixing and matching components within our Bootstrap 5 grid layouts.
NLR.gov components are designed for:
- Consistency: Standardized layouts ensure a cohesive brand experience across the entire site.
- Efficiency: Components can be easily reused.
- Digestibility: Components are preconfigured to chunk information into easily scannable, high-impact sections.
Touchability
NLR.gov is usable across devices. Increasingly, screens both large and small are touch-enabled, and, therefore, interactive components are big enough to touch on all screen sizes.
Generally, 48 px is the minimum size used for touch controls, meaning all form elements are a minimum of 48 px tall. Other items, such as text links, have a smaller touch area, so reducing the number of links in paragraphs of text or lists is preferred.
Accessibility
NLR.gov strives to meet the requirements of Section 508 of the Rehabilitation Act. Section 508 requires all federal agencies to make their electronic and information technologies accessible to people with physical, sensory, or cognitive disabilities. In practice, this means web content should be provided in a way that is accessible to all visitors, no matter how they access the site. For more information, visit Section 508.gov.
Section 508 mandates how information is conveyed through color, contrast, design of tables, accessing on-page links, and more. The NLR.gov responsive design templates include the following section 508-related functionality:
- Persons using a screen reader are able to skip repetitive navigation links
- Color contrast for all elements are defined in the main style sheet (e.g. navigation, titles, fonts/background)
- All elements in the base template are accessible via a keyboard.
Code from the component library was created to be 508-compliant, including data tables and keyboard accessibility for accordions. Accessible placeholder code for other elements and components is provided, and the person adding the content will be required to insert appropriate text for photos, icons, multimedia, and form elements.
See the following guidance for some of the most common tasks related to Section 508:
Writing text versions for videos and animations
Share
Last Updated June 29, 2026