Style Guide

1. Fonts & Type Scaling

H1 – Madera 50px – Extra Bold

H2 – Madera 40px – Bold

H3 – Madera 30px – Bold

H4 – Madera 20px – Bold

H5 – Madera 18px – Bold
H6 – Madera 16px – Bold
P – Paragraph and Body text – Madera 18px – 1.6em lineheight

Lorem labitur petentium eam, cum apeirian repudiandae ne. Cum ad apeirian moderatius, tation argumentum mea cu. Ea eos inermis conceptam, cu dicta dolores eum, id eros utamur equidem duo. Ut reque dicam denique his, eum doctus pericula ut, ut mel porro dicit ullamcorper.

P – Small text – Madera 14px – 1.6em lineheight

Lorem ipsum dolor sit amet, at labitur petentium eam, cum apeirian repudiandae ne. Cum ad apeirian moderatius, tation argumentum mea cu. Ea eos inermis conceptam, cu dicta dolores eum, id eros utamur equidem duo. Ut reque dicam denique his, eum doctus pericula ut, ut mel porro dicit ullamcorper.

List Items

ul

  • Item One
  • Item Two
  • Item Three
    • Sub Item
    • Sub item Two
  • Lorem labitur petentium eam, cum apeirian repudiandae ne. Cum ad apeirian moderatius, tation argumentum mea cu.
  • Item Two
  • Lorem labitur petentium eam, cum apeirian repudiandae ne.
    • Item One
    • Item Two
    • Item Three
  • Item One
  • Lorem labitur petentium eam, cum apeirian repudiandae ne. Cum ad apeirian moderatius, tation argumentum mea cu.
  • Lorem labitur petentium eam, cum apeirian repudiandae ne.
    • Item One
    • Item Two
    • Item Three

ol

  1. Item One
  2. Item Two
  3. Item Three
    1. Item One csdfdfsdfsdfsdvdgfdfgdfgdfgdfgdfgdfgfdgdfggfdfgdfgdfgdfg
    2. Item Two
    3. Item Three
      1. Item One
      2. Item Two
      3. Item Three
  1. Item One
  2. Item Two
  3. Item Three
    1. Sub Item
    2. list thing

2. Buttons and States

Big
Small
Fill Charcoal
Big
Small
Fill Charcoal
Big
Small
Fill Charcoal
Big
Small
Fill Charcoal
Big
Small
Fill Charcoal
Big
Small
Fill Charcoal
Big
Small
Fill Charcoal
Big
Small
Fill Charcoal
Find a branch
Pay-in and pay-out partners
Find a branch
Pay-in and pay-out partners
Send money now

Classes needed for:

Find a branch button = find-branch-btn

View pay-in and pay-out partners = pay-partners-btn

Send money now = send-money-button

3. Utility Classes

Margin Classes

.mt-0 = margin-top: 0px;

.mt-1 = margin-top: 1rem;

.mt-2 = margin-top: 2rem;

.mt-3 = margin-top: 3rem;

.mt-4 = margin-top: 4rem;

.mt-5 = margin-top: 5rem;

.ml-0 = margin-left: 0px;

.ml-1 = margin-left: 1rem;

.ml-2 = margin-left: 2rem;

.ml-3 = margin-left: 3rem;

.ml-4 = margin-left: 4rem;

.ml-5 = margin-left: 5rem;

.mr-0 = margin-right: 0px;

.mr-1 = margin-right: 1rem;

.mr-2 = margin-right: 2rem;

.mr-3 = margin-right: 3rem;

.mr-4 = margin-right: 4rem;

.mr-5 = margin-right: 5rem;

.mb-0 = margin-bottom: 0px;

.mb-1 = margin-bottom: 1rem;

.mb-2 = margin-bottom: 2rem;

.mb-3 = margin-bottom: 3rem;

.mb-4 = margin-bottom: 4rem;

.mb-5 = margin-bottom: 5rem;

.mx-auto = margin-left: auto; margin-right: auto;

Padding Classes

.pt-0 = padding-top: 0px;

.pt-1 = padding-top: 1rem;

.pt-2 = padding-top: 2rem;

.pt-3 = padding-top: 3rem;

.pt-4 = padding-top: 4rem;

.pt-5 = padding-top: 5rem;

.pl-0 = padding-left: 0px;

.pl-1 = padding-left: 1rem;

.pl-2 = padding-left: 2rem;

.pl-3 = padding-left: 3rem;

.pl-4 = padding-left: 4rem;

.pl-5 = padding-left: 5rem;

.pr-0 = padding-right: 0px;

.pr-1 = padding-right: 1rem;

.pr-2 = padding-right: 2rem;

.pr-3 = padding-right: 3rem;

.pr-4 = padding-right: 4rem;

.pr-5 = padding-right: 5rem;

.pb-0 = padding-bottom: 0px;

.pb-1 = padding-bottom: 1rem;

.pb-2 = padding-bottom: 2rem;

.pb-3 = padding-bottom: 3rem;

.pb-4 = padding-bottom: 4rem;

.pb-5 = padding-bottom: 5rem;

Text Alignment Classes

.text-left = text-align: left;

.text-center = text-align: center;

.text-right = text-align: center;

Only from 768px and higher screens it works and below the following classes does nothing:

.text-md-left = text-align: left;

.text-md-center = text-align: center;

.text-md-right = text-align: center;

MAX WIDTH CLASS

.max-w-1200

.max-w-1000

.max-w-950

.max-w-900

.max-w-800

.max-w-750

.max-w-700

.max-w-650

.max-w-600

.max-w-550

.max-w-500

.max-w-450

.max-w-400

.max-w-350

Order Classes (add them to the column to under the Columns Block to change the order)

.order-3

.order-2

.order-1

Only applies when it’s 768px and higher screen sizes

.order-md-3

.order-md-2

.order-md-1

JUSTIFIED Classes (add them to the BUTTONS WRAPPER)

.justified-end

.justified-center

.justified-start

Only applies when it’s 768px and higher screen sizes

.justified-md-end

.justified-md-center

.justified-md-start

Border Radius

.border-rad-20

.border-rad-30

.border-rad-40

Cover Block overlay Classes

has-cover-overlay

.has-cover-overlay-desktop

.has-cover-overlay-mobile

4. Hover Boxes

Whatsapp

+27860018555

Our self sign up function on WhatsApp is an easy way to register. You’ll be able to send R2,000 right away.

On our

MUKURU APP

Download the Mukuru App from the Google Play Store or iOS App Store, sign up and transact easily – you can send R2,000 right away or increase your limits.

Call Us

086 001 8555

Contact a Mukuru consultant on 0860018555 or Dial *130*566# for free and we will call you.

5. Mobile Menu

Mukuru offers a cost effective, fast and fully traceable way to payout aid and grant money that supports millions of the poorest people in the worldAid Distribution

.card-box-shadow

Send Money To

Flag Icon Angola
  • transfer money to angolaAngola
  • Bangladesh
  • Botswana
  • send cash to burundiBurundi
  • Cameroon
  • China
  • DRC
  • eSwatini
  • Ethiopia
  • Send money to EUEuropean Union
  • Ghana
  • India
  • Kenya
  • Lesotho
  • Malawi
  • Mozambique
  • Nigeria
  • Pakistan
  • Rwanda
  • Somalia
  • South Africa
  • Tanzania
  • Uganda
  • transfer money to the United KingdomUnited Kingdom
  • mukuru united statesUnited States of America
  • Zambia
  • Zimbabwe
Fill Charcoal
This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.