Foundations
Accessibility
Colors
Design Principles
Design Tokens
Icons
Layout
Logo
Typography
Writing Guidelines
Components
Accordion
Action Icon
Banner
Breadcrumb
Button
Button Group
Card
Checkbox
Chip
Context Switcher
Data Visualization
Date Picker
Dialog
Empty State
Form Label
Image
Input
Link
List
Loader
Menu
Modal
Pagination
Popout
Progress Bar
Radio
Range Slider
Scroll Bar
Select
Stepper
Switch
Table
Tabs
Tile
Toast
Toggle Button
Tooltip
Patterns
Editable Text
Filter Bar
KPI Widgets
Page Headers
Side Panels
Skeleton
Truncation
Validation
Development
How to Use Logo
How to Use List
How to Use Icon
How to Use Global Nav
How to Use Chip
How to Use Button
How to Use Action Icon
How to Use Styles
Create GitLab Access Token
GDS Web + React
HomeFoundations
Design PrinciplesWriting GuidelinesAccessibilityDesign TokensColorsTypographyLayoutIconsLogo
Components
AccordionAction IconBannerBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPaginationPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
HomeFoundations
Design PrinciplesWriting GuidelinesAccessibilityDesign TokensColorsTypographyLayoutIconsLogo
Components
AccordionAction IconBannerBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPaginationPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
Components
These are the building blocks of the Nielsen Design System. You can use these to help craft a new application or help modify an existing one. Please note that these are constantly being improved and added to, so check back later if there's something you don't see!
Accordion
accordion-snapshot.png
Action Icon
action-icon-snapshot.png
Banner
banner-snapshot.png
Breadcrumb
breadcrumb-snapshot.png
Button
button-snapshot.png
Button Group
button-group-snapshot.png
Card
card-snapshot.png
Checkbox
checkbox-snapshot.png
Chip
chip-snapshot.png
Context Switcher
context-switcher-snapshot.png
Dialog
dialog-snapshot.png
Empty State
empty-state-snapshot.png
Image
image.png
Input
input-snapshot.png
Link
link-snapshot.png
List
list-snapshot.png
Loader
loader-snapshot.png
Menu
menu-snapshot.png
Modal
modal-snapshot.png
Pagination
pagination-snapshot.png
Popout
popout-snapshot.png
Progress Bar
progress-bar-snapshot.png
Radio
radio-snapshot.png
Range Slider
range-slider-snapshot.png
Scroll Bar
scrollbar-snapshot.png
Select
select-snapshot.png
Stepper
stepper-snapshot.png
Switch
switch-snapshot.png
Tabs
tabs-snapshot.png
Tile
tile-snapshot.png
Toast
toast-snapshot.png
Toggle Button
toggle-snapshot.png
Tooltip
tooltip-snapshot.png
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.