Please be careful changing the styleguide, they will affect everything on the site :)

typography

display

Display typography is used in hero's. A display heading does not break, but scales down on mobile. Display paragraphs do not have bottom margin. Add a heading + display class explicitly. Any html element can be used.

text — override + display class
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Paragraph text
label-lg-mb, used most often and mainly at the beginning of sections and with a color applied, has built-in margin-bottom
label-md-bold, used for plans, has built-in margin-bottom
label-md, used inside plan grids, has 18 px font size, no margin-bottom
label small, used inside plan grids, has 15px font size, no margin-bottom

This is Paragraph text that is used in grids, it starts out the same as normal paragraph text but is smaller on small viewports.

i'm an example of a large label with a light-sea-green class applied
blog

Blog typography is usually a bit smaller and based on the default, but headings are 2 steps smaller. Paragraphs have a bottom margin. Blog typography is always used inside a rich text block.

default

default typography is used mostly on (top of) landing pages. Paragraphs don't have bottom margin. It does not need a class, to style a heading in a different way, use the override classes.

base elements — no class

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph text

styled text — override class
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Paragraph text
label-lg-mb, used most often and mainly at the beginning of sections and with a color applied, has built-in margin-bottom
label-md-bold, used for plans, has built-in margin-bottom
label-md, used inside plan grids, has 18 px font size, no margin-bottom
label small, used inside plan grids, has 15px font size, no margin-bottom

This is Paragraph text that is used in grids, it starts out the same as normal paragraph text but is smaller on small viewports.

i'm an example of a large label with a light-sea-green class applied

forms

default
Bedankt! We hebben je gegevens ontvangen.
Oeps, er ging iets mis met het insturen van het formulier. Probeer het nog eens.
On a dark background
Bedankt! We hebben je gegevens ontvangen.
Oeps, er ging iets mis met het insturen van het formulier. Probeer het nog eens.

rich text

default

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

link

‍

Also see this page for all lists

  • unordered list item
  • unordered list item
  1. ordered list item
  2. ordered list item
in long copy (blog posts and document pages), on web

Heading 1 (In most cases, don't use h1 because it's already there)

Heading 2

Heading 3

Heading 4

Heading 5

And this is some standard paragraph (p) text. 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.

‍Also see this page for all lists

  • unordered list item
  • unordered list item
  1. ordered list item
  2. ordered list item
in faq items

And this is some standard paragraph (p) text. 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. link

in long copy, in the app

Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit

paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit

paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit

paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit

paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit

And this is some standard paragraph (p) text. 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.‍

Bold text as title

misused as text (should be fixed in content)

paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit

‍Also see this page for all lists

paragraph text before list

  • unordered list item 1 line
  • unordered list item 2 lines Lorem ipsum dolor sit amet, consectetur adipiscing el
  • unordered list item 3 lines Lorem ipsum dolor sit amet, consectetur adipiscing eladsfasdfadfa
  1. ordered list item 1 line
  2. ordered list item 2 lines Lorem ipsum dolor sit amet, consectetur adipiscing el
  3. ordered list item 3 lines Lorem ipsum dolor sit amet, consectetur adipiscing el dolor sit amet, consectetur adipiscing el

Sub text. Verstandig belegd in passieve indexfondsen met lage kosten. Voel je goed door duurzaam te beleggen. Vive berekent het ideale risicoverloop in jouw portefeuille en stuurt jou automatisch bij.

Label - Large
Label - Medium
Label - Small

Buttons

Button base classes, only support for vive icon and arrow for now. Text and background gradient can be overridden.

Button with Vive icon left

Button label

Button with arrow right

Probeer het uit

Button override example, can become higher if width is constrained.

some other text and different background

Cards

Put cards in a grid, so left an right margins are 0 by default.

Genereer automatisch een persoonlijk plan voor je geld

Maak moeiteloos investeringsplannen die rekening houden met wie jij bent en wat je wilt bereiken.

Plan maken

Laat je geld beleggen zoals  pientere professionals

Laat je geld professioneel beleggen, 24/7 bijhouden en waar nodig bijsturen zodat het je geen centje tijd kost.

Laten beleggen

color

Text color classnames start with "color" and background color names with "bg". SVG's can be colorized with color classes too!

text colors, solid
background classes for use on light areas
(10p indicates transparency)
backgrounds, solid, use on dark
color-sky-blue
color-medium-orchid
color-tan
color-dark-slate-grey
color-vive-black
color-light-sea-green
bg-sky-blue-10p
bg-medium-orchid-10p
bg-light-sea-green-10p
bg-vive-black
bg-seashell
bg-white-smoke
bg-dark-slate-grey
bg-light-cyan
bg-thistle
bg-light-cyan
bg-thistle

Text color classnames start with "color" and background color names with "bg". SVG's can be colorized with color classes too!

SVG inside an empty div block gets color from body text (vive black)
same SVG, but inside a container with color-sky-blue

badges

stocks
Green Badge with transparent green background
bonds
Purple badge, transparent purple background and purple text

grid with spacers

Put spacers of different sizes in between to control grid gaps

margin and spacer util classes

Some spacers, hover over the elements to see them. Spacers should never contain any content. Most spacers get smaller on smaller viewports, the height/width is indicated in the class name.

Margins are always set to a default bottom value, or 0. If a margin-bottom needs to be overridden use a spacer and optionally set a mb-0 class to the element that does not have the desired margin bottom. Below is an empty div block that will override to a margin-bottom of 0