Typography

Base styles to style text in your application.

Note: To use these classes you need neptune.css or neptune-core.css on your page. Refer to Installation on the Setup page to get started.

Headings

The HTML <h1><h6> section headings. Also available as .h1.h6 for inline styling.

h1. Money without borders

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

h2. Money without borders

semi-bold 22px
line-height 30px
margin-bottom 2px

h3. Money without borders

semi-bold 18px
line-height 24px

h4. Money without borders

semi-bold 16px
line-height 24px
h5. Money without borders
semi-bold 16px
line-height 24px
h6. Money without borders
semi-bold 14px
line-height 24px

Display headings

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

Display 1

bold 56px
line-height 72px
margin-bottom 24px

Display 2

bold 56px
line-height 72px
margin-bottom 24px

Display 3

bold 42px
line-height 48px
margin-bottom 8px

Display 4

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

Body copy

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.

Lead body copy

.lead

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.

Inline text elements

Small text

<small>, .small

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.

Tiny text

.tiny

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.

Bold text

<strong> <b>

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.

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 classes

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.

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.

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 TransferWise Blog

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

Kristo in TransferWise Blog

Lists

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

Unordered list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Fusce egestas lorem et magna scelerisque fermentum in quis mi.
  • 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 sagittis neque sit amet pulvinar tincidunt.
  • Nulla mollis justo et dolor tincidunt maximus.
  • Sed rutrum quam eget libero tristique hendrerit.
  • Aliquam hendrerit purus non vulputate dictum.
  • Vivamus vitae ex vitae libero cursus porttitor.
  • Donec vitae odio malesuada, porttitor dolor nec, fermentum massa.
  • Nulla elementum libero sit amet odio posuere pulvinar.
  • Aliquam commodo purus a luctus tristique.

Ordered list

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Fusce egestas lorem et magna scelerisque fermentum in quis mi.
  3. 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 sagittis neque sit amet pulvinar tincidunt.
  4. Nulla mollis justo et dolor tincidunt maximus.
  5. Sed rutrum quam eget libero tristique hendrerit.
  6. Aliquam hendrerit purus non vulputate dictum.
  7. Vivamus vitae ex vitae libero cursus porttitor.
  8. Donec vitae odio malesuada, porttitor dolor nec, fermentum massa.
  9. Nulla elementum libero sit amet odio posuere pulvinar.
  10. Aliquam commodo purus a luctus tristique.
Edit these docs on Github