Navigation

axiom-navigation-nav

Fixed Nav: axiom-navigation-nav-fixed

Product Name
Projects Organizations Norms Admin Admin
  • Long Long Menu Item Here
  • Item Three
  • Item Four

Axiom Colors

Warning
Alert
Primary
Success
Error
Dynata Blue
Dynata Navy
Light
Dark

Buttons

Default

Default: axiom-button-button
Icon Only Buttons: axiom-button-button-icon
Icon On Left: axiom-button-button axiom-button-icon-left
Icon On Right: axiom-button-button axiom-button-icon-right
Icon On Both Sides: axiom-button-button axiom-button-icon-both

Secondary

Secondary: axiom-button-button-secondary
Icon Only Buttons: axiom-button-button-icon

Tertiary

Tertiary: axiom-button-button-tertiary
Icon Only Buttons: axiom-button-button-icon-tertiary

Positive

Positive: axiom-button-button-positive
Icon Only Buttons: axiom-button-button-icon-positive

Negative

Positive: axiom-button-button
Icon Only Buttons: axiom-button-button-icon

Text Fields

axiom-textfield-input

Chips

axiom-chip-chip

Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Default Chip
Secondary Chip
Secondary Chip
Secondary Chip
Secondary Chip
Tertiary Chip
Tertiary Chip
Tertiary Chip
Tertiary Chip
Positive Chip
Positive Chip
Positive Chip
Positive Chip
Negative Chip
Negative Chip
Negative Chip
Negative Chip

Dropdown

axiom-dropdown-default

Default
Default - Expanded
  • Item
  • Item
  • Item
  • Item
  • Item
Default - disabled
Default - hoverable
  • Item
  • Item
  • Item
  • Item
Default - hoverable - disabled
Searchable
  • Item
  • Item
  • Item
  • Item
Searchable
  • Item
  • Item
  • Item
  • Item
Searchable
  • Item One
  • Item Two
  • Item Three
  • Item Four
transparent
transparent - expanded
  • Item
  • Item
  • Item
  • Item
transparent - disabled
transparent - hoverable
  • Item
  • Item
  • Item
  • Item
transparent - hoverable - disabled
Multi Select
Multi Select
  • Item
  • Item
  • Item
  • Item
Multi Select
Searchable
Searchable
  • Item
  • Item
  • Item
  • Item
Searchable

Checkbox

axiom-checkbox-checkbox

axiom-checkbox-checkbox-indeterminate

Radio Button

axiom-radio-default

Pagination

axiom-pagination-default

Test 1
Test 2
Test 3
Test 4

Notification

axiom-notification-default

Long message

Longer message text can go in here.

Info Message
Success Message
Error Message

Pills

axiom-pills-pill

Pill line one example Line two example
Pill line one example Line two example
Pill line one example Line two example
Pill line one example Line two example

Progress Bar

axiom-progressbar-bar-wrapper

axiom-progressbar-bar-wrapper axiom-progressbar-with-label

50%

Accordion

axiom-accordion-accordion

Age (2)
< 18
19-24
25-30
Gender (1)
Hidden Content
Household Income (1)
Hidden Content

Tabs

axiom-tabs-tabs

Tab 1
Tab 2
Tab 3 With a Longer Name
A bunch of content here 1

Side Sheet

axiom-sidesheet-overlay

Side Sheet
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Content 9
Content 10
Content 11
Content 12
Content 13
Content 14
Content 15
Content 16
Content 17
Content 18
Content 19
Content 20
Content 21
Content 22
Content 23
Content 24
Content 25

SideNav

axiom-sidenav-nav / axiom-sidenav-nav-collapsed

Sampling
Organizations
Norms Admin
Admin
Tabs
Key Findings
Purchase Behaviour
Attributes
Respondent Demographics
Brand Awareness
Methodologies
Filter Set
Date Range
Demographics
Age (2)
< 18
19-24
25-30
Gender
Hidden Content
Income
Hidden Content

SideNav - Navy

axiom-sidenav-nav-navy / axiom-sidenav-nav-navy-collapsed

Sampling
Organizations
Norms Admin
Admin
Tabs
Key Findings
Purchase Behaviour
Attributes
Respondent Demographics
Brand Awareness
Methodologies
Filter Set
Date Range
Demographics
Age (2)
< 18
19-24
25-30
Gender
Hidden Content
Income
Hidden Content

SideNav - Light

axiom-sidenav-nav-light / axiom-sidenav-nav-light-collapsed

Sampling
Organizations
Norms Admin
Admin
Tabs
Key Findings
Purchase Behaviour
Attributes
Respondent Demographics
Brand Awareness
Methodologies
Filter Set
Date Range
Demographics
Age (2)
< 18
19-24
25-30
Gender
Hidden Content
Income
Hidden Content

Modal

axiom-modal-overlay

Modal Title Subtitle or instruction
Content Section Header
A section with some detailed information in it. This paragraph is in the default body styling and can easily be a few lines long without overwhelming the user.

Tooltip

axiom-tooltip-default

axiom-tooltip-right

Some text here

axiom-tooltip-left

Some text here

axiom-tooltip-top

Some text here

axiom-tooltip-bottom

Some text here

Tooltip with multiple lines

Some text here Some text here

Some text here

Switch

axiom-switch-default