Typography

Base styles to style text in your application.

Headings

Use .title-1 , .title-2 ... font styling classes for the headings. Avoid using heading elements (h1h6) without any class. This avoids potential specificity issues and it's a better practice for posible use of CSS modules in future. If a bigger size is needed, for a h1 in a hero component in marketing pages, for example, you can use .display-5, instead of .title-1. E.g. <h1 class="display-5" />

Title 1. Money without borders

.title-1
bold 32px
line-height 1.2
margin-bottom 8px

Title 2. Money without borders

.title-2
bold 26px
line-height 1.2
margin-bottom 4px

Title 3. Money without borders

.title-3
semi-bold 20px
line-height 1.2
margin-bottom 2px

Title 4. Money without borders

.title-4
semi-bold 16px
line-height 1.2
Title 5. Money without borders
.title-5
semi-bold 14px
line-height 1.2

Display headings

Use display headings .display-1.display-5 to stand out from traditional section headers.

Display 1

.display-1bold 56px
line-height 72px
margin-bottom 24px

Display 2

.display-2bold 56px
line-height 72px
margin-bottom 24px

Display 3

.display-3bold 42px
line-height 48px
margin-bottom 8px

Display 4

.display-4bold 28px
line-height 32px
margin-bottom 4px

Display 5

.display-5bold 28px
line-height 32px
margin-bottom 4px

Body copy

StylePropertiesHow to use

Body 1
We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

.body-1
regular 16px
line-height 1.5
Our default style for content in paragraphs and longer form copy.

Body 2
We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

.body-2
regular 14px
line-height 1.5
Use for secondary information related to another piece of copy set in Body 1.

Body 3
We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

.body-3
regular 12px
line-height 1.5
Should be avoided. Use only when the information is not critical to the user.

Control 1

.control-1
semibold 16px
line-height 1.2
Use inside interactive components, such as buttons, dropdowns, tabs.

Control 2

.control-2
semibold 14px
line-height 1.2

Label

.label
regular 14px
line-height 1.5
Use for labelling inputs and values.

Value

.value
regular 16px
line-height 1.5

Lead body copy

<p className="lead">
  We’re on a mission to bring transparency to finance, for people without borders
</p>

We’re on a mission to bring transparency to finance, for people without borders

Small Text

<small>
  We’re on a mission to bring transparency to finance, for people without borders.
</small>
<span class="small">
  We’re on a mission to bring transparency to finance, for people without borders.
</span>

We’re on a mission to bring transparency to finance, for people without borders.We’re on a mission to bring transparency to finance, for people without borders.

Tiny Text

<p className="tiny">
  We’re on a mission to bring transparency to finance, for people without borders.
</p>

We’re on a mission to bring transparency to finance, for people without borders.

Emphasis styles

Text styles can also be emphasised with a stronger priority or a different purpose. If the style's weight is regular, then its emphasised counterpart changes to semibold. Otherwise there's no change.
Font weightsProperties

I am a regular text

.font-weight-regular
font-weight: 500

I am a semi bold text

.font-weight-semi-bold
font-weight: 600

I am a bold text

.font-weight-bold
font-weight: 800
Emphasis colourLight (Default)Navy
.text-primaryPrimaryPrimary
.text-positivePositivePositive
.text-negativeNegativeNegative
.text-warningWarningWarning
.text-infoInfoInfo

Utility styles

Inverse

Text inverse

.text-inverse

Muted

Text muted

.text-muted

Alignment classes

Left

.text-xs|sm|md|lg|xl-left

We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

Center

.text-xs|sm|md|lg|xl-center

We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

.text-xs|sm|md|lg|xl-right

We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

Justify

.text-xs|sm|md|lg|xl-justify

We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

Nowap

.text-xs|sm|md|lg|xl-nowrap

We’re on a mission to bring transparency to finance, for people without borders.

Transformation

Lowercase

.text-lowercase

We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

Uppercase

.text-uppercase

We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

Capitalize

.text-capitalize

We’re on a mission to bring transparency to finance, for people without borders. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.

Blockquotes

<blockquote /> / .blockquote-reverse 

We’re on a mission to bring transparency to finance, for people without borders.

We’re on a mission to bring transparency to finance, for people without borders.

Kristo in Wise Blog

We’re on a mission to bring transparency to finance, for people without borders.

Kristo in Wise Blog

Lists

Unstyled list can be achieved using .list-unstyled class.

Unordered list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Cras ac augue vitae massa dapibus condimentum et sit amet augue.
    • Vivamus volutpat nisi ut ex consectetur auctor.
    • Nullam ut tortor ut odio aliquet elementum.
  • Nulla mollis justo et dolor tincidunt maximus.
  • Sed rutrum quam eget libero tristique hendrerit.

Ordered list

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Cras ac augue vitae massa dapibus condimentum et sit amet augue.
    1. Vivamus volutpat nisi ut ex consectetur auctor.
    2. Nullam ut tortor ut odio aliquet elementum.
  3. Nulla mollis justo et dolor tincidunt maximus.
  4. Sed rutrum quam eget libero tristique hendrerit.