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

  • Card Select
  • 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

↕️↔️ All directions

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

↔️ Horizontal only

Class NameOutput
mh-automargin-left: auto;
margin-right: auto;
mh-0xmargin-left: 0;
margin-right: 0;
mh-1xmargin-left: 0.25rem;
margin-right: 0.25rem;
mh-2xmargin-left: 0.5rem;
margin-right: 0.5rem;
mh-3xmargin-left: 1rem;
margin-right: 1rem;
mh-4xmargin-left: 1.5rem;
margin-right: 1.5rem;
mh-5xmargin-left: 2rem;
margin-right: 2rem;

↕️ Vertical only

Class NameOutput
mv-automargin-top: auto;
margin-bottom: auto;
mv-0xmargin-top: 0;
margin-bottom: 0;
mv-1xmargin-top: 0.25rem;
margin-bottom: 0.25rem;
mv-2xmargin-top: 0.5rem;
margin-bottom: 0.5rem;
mv-3xmargin-top: 1rem;
margin-bottom: 1rem;
mv-4xmargin-top: 1.5rem;
margin-bottom: 1.5rem;
mv-5xmargin-top: 2rem;
margin-bottom: 2rem;

⬇️ Bottom only

Class NameOutput
mb-automargin-bottom: auto;
mb-0xmargin-bottom: 0;
mb-1xmargin-bottom: 0.25rem;
mb-2xmargin-bottom: 0.5rem;
mb-3xmargin-bottom: 1rem;
mb-4xmargin-bottom: 1.5rem;
mb-5xmargin-bottom: 2rem;

⬅️ Left only

Class NameOutput
ml-automargin-left: auto;
ml-0xmargin-left: 0;
ml-1xmargin-left: 0.25rem;
ml-2xmargin-left: 0.5rem;
ml-3xmargin-left: 1rem;
ml-4xmargin-left: 1.5rem;
ml-5xmargin-left: 2rem;

➡️ Right only

Class NameOutput
mr-automargin-right: auto;
mr-0xmargin-right: 0;
mr-1xmargin-right: 0.25rem;
mr-2xmargin-right: 0.5rem;
mr-3xmargin-right: 1rem;
mr-4xmargin-right: 1.5rem;
mr-5xmargin-right: 2rem;

⬆️ Top only

Class NameOutput
mt-automargin-top: auto;
mt-0xmargin-top: 0;
mt-1xmargin-top: 0.25rem;
mt-2xmargin-top: 0.5rem;
mt-3xmargin-top: 1rem;
mt-4xmargin-top: 1.5rem;
mt-5xmargin-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 NameDescription
-smOnly applied to small viewports
-mdApplied to medium and up viewports
-lgApplied 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>
VariableValue
--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

↕️↔️ All directions

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

↔️ Horizontal only

Class NameOutput
mh-automargin-left: auto;
margin-right: auto;
mh-0xmargin-left: 0;
margin-right: 0;
mh-1xmargin-left: 4px;
margin-right: 4px;
mh-2xmargin-left: 8px;
margin-right: 8px;
mh-3xmargin-left: 16px;
margin-right: 16px;
mh-4xmargin-left: 24px;
margin-right: 24px;
mh-5xmargin-left: 32px;
margin-right: 32px;

↕️ Vertical only

Class NameOutput
mv-automargin-top: auto;
margin-bottom: auto;
mv-0xmargin-top: 0;
margin-bottom: 0;
mv-1xmargin-top: 4px;
margin-bottom: 4px;
mv-2xmargin-top: 8px;
margin-bottom: 8px;
mv-3xmargin-top: 16px;
margin-bottom: 16px;
mv-4xmargin-top: 24px;
margin-bottom: 24px;
mv-5xmargin-top: 32px;
margin-bottom: 32px;

⬇️ Bottom only

Class NameOutput
mb-automargin-bottom: auto;
mb-0xmargin-bottom: 0;
mb-1xmargin-bottom: 4px;
mb-2xmargin-bottom: 8px;
mb-3xmargin-bottom: 16px;
mb-4xmargin-bottom: 24px;
mb-5xmargin-bottom: 32px;

⬅️ Left only

Class NameOutput
ml-automargin-left: auto;
ml-0xmargin-left: 0;
ml-1xmargin-left: 4px;
ml-2xmargin-left: 8px;
ml-3xmargin-left: 16px;
ml-4xmargin-left: 24px;
ml-5xmargin-left: 32px;

➡️ Right only

Class NameOutput
mr-automargin-right: auto;
mr-0xmargin-right: 0;
mr-1xmargin-right: 4px;
mr-2xmargin-right: 8px;
mr-3xmargin-right: 16px;
mr-4xmargin-right: 24px;
mr-5xmargin-right: 32px;

⬆️ Top only

Class NameOutput
mt-automargin-top: auto;
mt-0xmargin-top: 0;
mt-1xmargin-top: 4px;
mt-2xmargin-top: 8px;
mt-3xmargin-top: 16px;
mt-4xmargin-top: 24px;
mt-5xmargin-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 NameDescription
-smOnly applied to small viewports
-mdApplied to medium and up viewports
-lgApplied 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>
VariableValue
--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