Colors
Color Samples
Used to create color swatches
Navy 900
Navy 700
Navy 600
Navy 400
Purple 700
Cyan 700
Cyan 500
Stroke Grey
Highlight blue
Grey
White
Yellow 700
Yellow 500
Green 700
Green 500
Background Color
Text Colors
text color
text color
text color
text color
text color
text color
text color
text color
text color
text color
text color
text color
text color
text color
text color
Typography
HTML Headings
All H1 Headings

This is an H1 heading

All H2 Headings

This is an H2 heading

All H3 Headings

This is an H3 heading

All H4 Headings

This is an H4 heading

All H5 Headings
This is an H5 heading
All H6 Headings
This is an H6 heading
Heading Classes
heading-xxlarge

heading-xxlarge

heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

heading-xsmall

heading-xsmall

Other HTML Tags
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list

  • No bullet list

All Unordered Lists
  • No bullet list

  • No bullet list

All Ordered Lists
  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Sizes
text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weights
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-large (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Line Heights
text-lineheight-xtall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-tall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-short
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-xshort
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
eyebrow-m
eyebrow-m
eyebrow-s
eyebrow-s
Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Effects
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
UI Elements
Buttons
button
is-button-small
button-secondary
button-secondary
is-button-small
button-tertiary
button-tertiary
is-button-small
button-link
To use on a dark background, simple use the add-on class is-alternate
button
is-alternate
button
is-button-small
is-alternate
button-secondary
is-alternate
button-secondary
is-button-small
is-alternate
button-tertiary
is-alternate
button-tertiary
is-button-small
is-alternate
button-link
is-alternate
Buttons With Icons
button
with-icon
button
is-button-small
with-icon
button-secondary
with-icon
button-secondary
is-button-small
with-icon
button-tertiary
with-icon
button-tertiary
is-button-small
with-icon
button-link
with-icon
Form Elements
field-label
form-input
field-label
form-input
is-text-area
field-label
form-input
is-select-input
form-checkbox
form-checkbox-icon
form-checkbox-label
form-radio
form-radio-icon
form-radio-label
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)

icon-xxsmall

icon-xsmall

icon-small

icon-medium

icon-large

icon-xlarge

icon-custom

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.
Want to learn some tips on using HTML embeds for icons?
Watch Tutorial

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom

Images

image-wrapper-1:1

image-wrapper-4:3

image-wrapper-3:2

image-wrapper-16:9

Components
Accordion
Maarten Smulders

CEO - Get Monkeys

Klant sinds APRIL 2021

Peter Moore - 2

Founder of Hartstikke BV

client since march 2019

Peter Moore - 3

Founder of Hartstikke BV

client since march 2019

Peter Moore - 4

Founder of Hartstikke BV

client since march 2019

Agencies / Consulting

Monitr helpt je de perfecte balans tussen werk en personeel vinden. Gebruik data om je bedrijf te laten groeien.

Retail- / E-commerce

Monitor helpt mij om een duidelijk overzicht te behouden over enerzijds mijn cashflow en P&L forecast en anderzijds wat nu in de boekhouding staat. Op deze manier kunnen we eenvoudig scenario's in real-time vergelijken en verschillende pipelines benchmarken met hun eigen specificiteit. Aushim Koumar - CEO Konligo

SaaS (Software as a Service)

Dankzij Monitr kan ik 10x sneller beslissingen nemen en de impact simuleren op onze cash balans. Ik weet precies wanneer ik nieuwe mensen moet aanwerven, welke profielen en wanneer. Het feit dat ik voor mijn runway over accurate en up-to-date cijfers bezit, maakt dit process veel makkelijker. Valeri Potchekailov - CEO StoryChief

CFO & Accountants

"Cash Flow forecasting is vaak te complex en te kostenintensief. Het enige alternatief zijn spreadsheets, die tijdrovend en foutgevoelig zijn. Met monitr bouwen we een Cash Flow forecast voor meerdere klanten in enkele minuten. Een hele vooruitgang. "Maarten Smulders - GetMonkey's (CEO)

Announcement bar

08/11: Webinar — Recession & cash flow forecasting tactics voor agencies

Inschrijven
Tabs

Vergeet je spreadsheets: wij hebben modules op maat van jouw sector en noden. Zo kan je op korte termijn bijsturen op basis van je operationele data. Die gegevens komen automatisch binnen. Uit je boekhoudsoftware, bijvoorbeeld, maar ook uit je BTW-gegevens, het CRM-systeem met je deals, operationele systemen, project management tools...

Vergeet je spreadsheets: wij hebben modules op maat van jouw sector en noden. Zo kan je op korte termijn bijsturen op basis van je operationele data. Die gegevens komen automatisch binnen. Uit je boekhoudsoftware, bijvoorbeeld, maar ook uit je BTW-gegevens, het CRM-systeem met je deals, operationele systemen, project management tools...

Vergeet je spreadsheets: wij hebben modules op maat van jouw sector en noden. Zo kan je op korte termijn bijsturen op basis van je operationele data. Die gegevens komen automatisch binnen. Uit je boekhoudsoftware, bijvoorbeeld, maar ook uit je BTW-gegevens, het CRM-systeem met je deals, operationele systemen, project management tools...

FAQ - Accordions
Agencies / consulting

Monitr helps you find the ideal balance between work and workforce. Use your business data to help your business grow.

SAAS

Find the best moment to raise capital or hire talent by relying on your business finances.

Retail- / E-commerce

Make smarter decisions based on your business finances. Monitr helps you keep track of your inventory and purchases.

CFO / Accountants

Create up-to-date and reliable reports at the speed of light. Monitr connects directly to your accountancy software.

Comparison FAQ
How do we compare

Monitr is right for you if ...

You're the cashflow is critical to your company

Monitr helps you find the ideal balance between work and workforce. Use your business data to help your business grow.

You want to forecast and predict your cashflow in real-time

Monitr helps you find the ideal balance between work and workforce. Use your business data to help your business grow.

You want an in depth insight in your reporting structure

Monitr helps you find the ideal balance between work and workforce. Use your business data to help your business grow.

You want to enhance your forecast using operational data

Monitr helps you find the ideal balance between work and workforce. Use your business data to help your business grow.

Others are right for you if ...
You require simple calculations to build a cashflow forecast

Monitr helps you find the ideal balance between work and workforce. Use your business data to help your business grow.

You find it sufficient to use bank statements as data input

Monitr helps you find the ideal balance between work and workforce. Use your business data to help your business grow.

Additional Classes from latest style guide update (v1.2)
Text Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Line Heights
text-lineheight-xtall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-tall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-short
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-xshort
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Color Samples
Used to create color swatches
Click and paste Color Palette
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
hide_large
hide_desktop
hide_tablet
hide_mobile-landscape
hide_mobile-portrait
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom