Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

Spacing

These spacing utilities are only available in the userTestingNext theme.


↕️↔️ All directions

Class Name Output Guideline
m-auto margin: auto; Used for centering an element
m-0x margin: 0;
m-1x margin: 0.25rem; Used for spacing within buttons and between type and icons
m-2x margin: 0.5rem; Used for spacing within buttons and between type and icons
m-3x margin: 1rem; Used for spacing between buttons and between strings of text
m-4x margin: 1.5rem; Used for spacing between elements within a container
m-5x margin: 2rem; Used for spacing of page-level elements, usually between containers

↔️ Horizontal only

Class Name Output
mh-auto margin-left: auto;
margin-right: auto;
mh-0x margin-left: 0;
margin-right: 0;
mh-1x margin-left: 0.25rem;
margin-right: 0.25rem;
mh-2x margin-left: 0.5rem;
margin-right: 0.5rem;
mh-3x margin-left: 1rem;
margin-right: 1rem;
mh-4x margin-left: 1.5rem;
margin-right: 1.5rem;
mh-5x margin-left: 2rem;
margin-right: 2rem;

↕️ Vertical only

Class Name Output
mv-auto margin-top: auto;
margin-bottom: auto;
mv-0x margin-top: 0;
margin-bottom: 0;
mv-1x margin-top: 0.25rem;
margin-bottom: 0.25rem;
mv-2x margin-top: 0.5rem;
margin-bottom: 0.5rem;
mv-3x margin-top: 1rem;
margin-bottom: 1rem;
mv-4x margin-top: 1.5rem;
margin-bottom: 1.5rem;
mv-5x margin-top: 2rem;
margin-bottom: 2rem;

⬇️ Bottom only

Class Name Output
mb-auto margin-bottom: auto;
mb-0x margin-bottom: 0;
mb-1x margin-bottom: 0.25rem;
mb-2x margin-bottom: 0.5rem;
mb-3x margin-bottom: 1rem;
mb-4x margin-bottom: 1.5rem;
mb-5x margin-bottom: 2rem;

⬅️ Left only

Class Name Output
ml-auto margin-left: auto;
ml-0x margin-left: 0;
ml-1x margin-left: 0.25rem;
ml-2x margin-left: 0.5rem;
ml-3x margin-left: 1rem;
ml-4x margin-left: 1.5rem;
ml-5x margin-left: 2rem;

➡️ Right only

Class Name Output
mr-auto margin-right: auto;
mr-0x margin-right: 0;
mr-1x margin-right: 0.25rem;
mr-2x margin-right: 0.5rem;
mr-3x margin-right: 1rem;
mr-4x margin-right: 1.5rem;
mr-5x margin-right: 2rem;

⬆️ Top only

Class Name Output
mt-auto margin-top: auto;
mt-0x margin-top: 0;
mt-1x margin-top: 0.25rem;
mt-2x margin-top: 0.5rem;
mt-3x margin-top: 1rem;
mt-4x margin-top: 1.5rem;
mt-5x margin-top: 2rem;

📱🖥 Viewport specific

If you only need margin on a specific viewport size, then you can sandwich the modifier modifier in-between the direction and value.

Class Name Description
-sm Only applied to small viewports
-md Applied to medium and up viewports
-lg Applied to large and up viewports

Example use:

This doesn't have margin.
📱 This element gets left + right auto-margin only on small.
Expand Copy
<div>
  This doesn't have margin.
</div>

<div class="mh-sm-auto">
  📱 This element gets left + right auto-margin only on <strong>small</strong>.
</div>
This element gets left + right auto-margin for all viewports.
Copy
<div class="mh-auto">
  This element gets left + right auto-margin for <strong>all viewports</strong>.
</div>
Variable Value
--s-0
0rem
--s-25
0.25rem
--s-50
0.5rem
--s-100
1rem
--s-150
1.5rem
--s-200
2rem
--s-250
2.5rem
--s-300
3rem
--s-400
4rem
--s-500
5rem
--s-600
6rem
--s-800
8rem
--s-1000
10rem

These spacing utilities are only available in the userTesting theme.

↕️↔️ All directions

Class Name Output Guideline
m-auto margin: auto; Used for centering an element
m-0x margin: 0;
m-1x margin: 4px; Used for spacing within buttons and between type and icons
m-2x margin: 8px; Used for spacing within buttons and between type and icons
m-3x margin: 16px; Used for spacing between buttons and between strings of text
m-4x margin: 24px; Used for spacing between elements within a container
m-5x margin: 32px; Used for spacing of page-level elements, usually between containers

↔️ Horizontal only

Class Name Output
mh-auto margin-left: auto;
margin-right: auto;
mh-0x margin-left: 0;
margin-right: 0;
mh-1x margin-left: 4px;
margin-right: 4px;
mh-2x margin-left: 8px;
margin-right: 8px;
mh-3x margin-left: 16px;
margin-right: 16px;
mh-4x margin-left: 24px;
margin-right: 24px;
mh-5x margin-left: 32px;
margin-right: 32px;

↕️ Vertical only

Class Name Output
mv-auto margin-top: auto;
margin-bottom: auto;
mv-0x margin-top: 0;
margin-bottom: 0;
mv-1x margin-top: 4px;
margin-bottom: 4px;
mv-2x margin-top: 8px;
margin-bottom: 8px;
mv-3x margin-top: 16px;
margin-bottom: 16px;
mv-4x margin-top: 24px;
margin-bottom: 24px;
mv-5x margin-top: 32px;
margin-bottom: 32px;

⬇️ Bottom only

Class Name Output
mb-auto margin-bottom: auto;
mb-0x margin-bottom: 0;
mb-1x margin-bottom: 4px;
mb-2x margin-bottom: 8px;
mb-3x margin-bottom: 16px;
mb-4x margin-bottom: 24px;
mb-5x margin-bottom: 32px;

⬅️ Left only

Class Name Output
ml-auto margin-left: auto;
ml-0x margin-left: 0;
ml-1x margin-left: 4px;
ml-2x margin-left: 8px;
ml-3x margin-left: 16px;
ml-4x margin-left: 24px;
ml-5x margin-left: 32px;

➡️ Right only

Class Name Output
mr-auto margin-right: auto;
mr-0x margin-right: 0;
mr-1x margin-right: 4px;
mr-2x margin-right: 8px;
mr-3x margin-right: 16px;
mr-4x margin-right: 24px;
mr-5x margin-right: 32px;

⬆️ Top only

Class Name Output
mt-auto margin-top: auto;
mt-0x margin-top: 0;
mt-1x margin-top: 4px;
mt-2x margin-top: 8px;
mt-3x margin-top: 16px;
mt-4x margin-top: 24px;
mt-5x margin-top: 32px;

📱🖥 Viewport specific

If you only need margin on a specific viewport size, then you can sandwich the modifier modifier in-between the direction and value.

Class Name Description
-sm Only applied to small viewports
-md Applied to medium and up viewports
-lg Applied to large and up viewports

Example use:

This doesn't have margin.
📱 This element gets left + right auto-margin only on small.
Expand Copy
<div>
  This doesn't have margin.
</div>

<div class="mh-sm-auto">
  📱 This element gets left + right auto-margin only on <strong>small</strong>.
</div>
This element gets left + right auto-margin for all viewports.
Copy
<div class="mh-auto">
  This element gets left + right auto-margin for <strong>all viewports</strong>.
</div>
Variable Value
--s-xs
4px
--s-small
8px
--s-medium
16px
--s-large
24px
--s-xl
32px
--s-2xl
36px
--s-3xl
40px
--s-4xl
48px
--s-5xl
56px