This announcement bar can be used to inform users of your Privacy Policy etc.
Modular & Reusable
Style Guide
Colors
Primaries and grays
Primary
M-Charcoal
#1B1F20
M-Gold
#E0A722
M-Cream
#FCF8EF
M-White
#FFFDF9
Note: The numbers Primary 1, Primary 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Primary 1" , "BG Primary 2" etc.
Secondary (ref Grey)
M-Night
#2C3638
M-Brown
#5E2C04
M-Burgundy
#751E1E
M-UI Border
#2C3638 (30%)
Note: The numbers Gray 1, Gray 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Gray 1" , "BG Gray 2" etc.
Status
Success
#51D37E
Warning
#FAB14E
Danger
#FC4343
Info
#8ae2f0
Note: The colors Success, Warning, Danger and Info refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Success" , "BG Warning" etc.
Type
Headings, body and other common text elements.
Display 1
Display 2
Note: You can make any text element display as a 'Display 1' or 'Display 2' size by adding the class 'Display 1' or 'Display 2' to it.
Size and state variations for text inputs and selectables.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Badges
Combine with other components to display metadata
Primary
Primary 1
Primary 2
Primary 3
Primary 4
Note: Use the class "Badge" to format an element as a badge. Use the background color classes . Example add the class "BG Primary 1" to a "Badge" element to control its background color.
