DNA
Digital Navigation Assistance
GETTING STARTED
How to use DNA
Resources and links
Code Repository
Designs Repositories
Release Notes
Designers
Developers
LAYOUT
Grid
Overview
Desktop ≥ 1200px
Desktop ≥ 992px
Tablet
Mobile
Modals Layout
Modal Dialog Sizes and Spaces
Modal Content Sizes and Spaces
Message Modals
Spacing
Tap targets
STYLE
Borders
Overview
Border Sizes and Types
Colors
Overview
Palettes
Horizontal Rules
Typography
Overview
Fonts
Headings
Paragraphs
Additional Text Utilities and Styles
Overlays
Overview
Overlays Range in Opacity
Scrims
Shadows
Statuses
Scrollbar
COMPONENTS: BUTTONS
Buttons
Overview
Buttons
Icon Buttons
Links and Buttons Links
Load More / Less Buttons
Show More / Less Buttons
Button Group
Overview
Switch Button Group
Controllers
Overview
Controllers
COMPONENTS: CARDS
Cards Overview
Generic Non-Expandable Cards
Generic Expandable Cards
Image and Icon Cards
Status Cards
Card Statuses
Generic Status Cards
Status List Cards
Status Matrix Cards
Site Cards
Product Cards
Rows of Cards
Single Card Row
Multiple Card Row
Thumbnails
Overview
Thumbnails
COMPONENTS: CHARTS
Charts Overview
Charts Rules and Best Practices
Charts Anatomy
Desktops
Tablets
Mobiles
Chart Sizes
Desktops
Tablets
Mobiles
Gauge Chart
Horizontal Stock Bar Chart
Line Chart
Radial Chart
Vertical Bar Chart
COMPONENTS: FORM ELEMENTS
Checkboxes
Overview
Standard Checkboxes
Product Colors Checkboxes
Checkbox Tree
Combo Boxes
Combo Dropdown Input
Dropdowns
Overview
Dropdown Button
Dropdowns Regular
Dropdowns Multi-Select
Dropdown Overflow
Date and Time Formats
Overview
Date Formats
Time Formats
Date and Time Pickers
Overview
Date Picker
Time Picker
Inputs
Overview
Input Fields
Input Groups
Input Validation
Lists
Overview
Text Lists
List Groups
Tags
Radio Buttons
Toggle Switches
COMPONENTS: NAVIGATION
Accordions
Overview
Accordions Details
Back to Top
Overview
Back to Top Details
Breadcrumbs
Overview
Breadcrumbs Types
Tabs
Overview
Tabs Anatomy
Tabs Types
Carousels
Overview
Carousel's Controls
Generic Carousels Types
Carousels Examples
Filters
Overview
Table Filters
Sidebar Filters
Filter Selection Results
Filter Behaviour
Go to Page
Indicators
Pagination
Overview
Pagination Details
Showing Results
Pagination Usage Examples
Search with Autocomplete
Overview
Sizes
States
Sidebar Navigation
Overview
Sidebar Navigation Details
Steppers
Overview
Steppers Anatomy
Steppers Types
COMPONENTS: NOTIFICATIONS
Alerts
Overview
Alerts Anatomy
Alerts Types
Badges
Notifications
Popovers
Overview
Popovers Types
Progress Bars
Spinners
Overview
Spinners Details
Tooltips
Overview
Tooltips Anatomy
Tooltip Types
COMPONENTS: TABLES
Overview
Sizes and Spacings
Heading and Rows
Tables Behaviour
Tables Types
Generic Tables
Data Table
Data Table w/ many columns
Accordion Tables
Compare Table
Shop Cart Table
Summary Tables
Empty Table
Mobile and Tablets
TEMPLATES
Modals
Overview
Sizes and Spaces
Notification Modals
ICONS AND IMAGES
Icons
Overview
Icons Usage
Library
Images
COMPONENTS
Accordions
Alerts and notifications
Alerts
Notifications
Badges
Buttons
Buttons
Show more
Buttons Group
Cards
Cards
Expandable Cards
Non Expandable Cards
Status Cards
Status List Cards
Carousels
Checkboxes
Colors
MultiSelect Dropdowns
Dropdowns
Horizontal Rule
Icons
Input Groups
Filters
Lists
List Groups
Modals
Matrix card
Navigation
Back to Top
Breadcrumbs
Context Menu
Sidebar Navigation
Tabs
Overlays
Pagination
Popovers
Progress bar
Radio Buttons
Site Card
Scrims
Search And Autocomplete
Shadows
Spacing & Layouts
Layout
Spacing
Steppers
Tables
Text Fields & Inputs
Text styles
Toggle Switches
Tooltips
Typography
Inverse background
Primary
Secondary
Tertiary
LTR
Go full screen
Open canvas in new tab
Copy canvas link