Customisation

Override the SDK's default styles using CSS variables and class selectors to match your platform's look and feel.

CSS Variables

Typography

Variable	Description
--font-family	Font applied to all text

:root {
  --font-family: 'Roboto', sans-serif;
}

Colours

Variable	Description
--cta-primary	Primary CTA background
--cta-primary-text	Primary CTA text colour
--cta-primary-hover	Primary CTA hover background
--cta-primary-text-hover	Primary CTA hover text colour
--cta-secondary	Secondary CTA background
--cta-secondary-text	Secondary CTA text colour
--cta-secondary-hover	Secondary CTA hover background
--cta-secondary-text-hover	Secondary CTA hover text colour
--text-title	Section title colour
--text-primary	Primary text colour
--text-secondary	Secondary text colour
--text-label	Input label colour
--text-input	Input text colour
--state-active	Active tab/state colour

:root {
  --cta-primary: #74c043;
  --cta-primary-text: #fff;
  --cta-primary-hover: #fff;
  --cta-primary-text-hover: #00a84f;
  --text-title: #095738;
  --state-active: #095738;
}

Class Overrides

Buttons

.mz-btn {
  border-radius: 1rem;
  border: 1px solid #74c043;
}

.mz-btn:hover {
  border: 2px solid black;
  background-color: white;
}

Cards

.mz-card {
  background-color: #f5f5f5;
  border-radius: 8px;
}