Digital styleguide

Typography Colors Buttons
Lines Dividers Innerpage-nav Shark fins Links Meta-data
Cards Polls Swipers Quote recommendations Profiles
Link collections Chapeau underlined
Header Cluster Hero
top

Typography

Headers H1 to H6

Default font family: poppins

poppins light mb-60 *H1 should be used ONCE on a page

H1 - Poppins light

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins light mb-60 *For other use H2 with H1 class

H2 (h1 class) - Poppins light

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins medium

H2 - Poppins medium

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins bold

H2 - Poppins bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins light mb-60 *For other use H2 with H1 class

H2 - freight-text-pro bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins light mb-20

H3 - Poppins light

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins bold mb-20

H3 - Poppins bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins extra-bold mb-20

H3- Poppins extra-bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins extra-bold white mb-20

H3 - Poppins extra-bold white

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins extra-bold white mb-20

H3 - korolev bold uppercase

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

poppins

H4 - Poppins

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

korolev bold

H4 - Korolev bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

korolev bold

H4 - Korolev bold xl

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

korolev bold
H5 - Korolev bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

korolev bold
H5 - Korolev bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

korolev medium mb-20
H6 - Korolev medium

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

korolev medium md-bold uppercase mb-20 !contains responsive font-family
H6 - Korolev medium(!md-bold!) uppercase

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

freight-text-pro bold mb-20
H6 - Freight-text-pro bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur sequi, soluta optio corrupti?

korolev bold uppercase mb-20
H6 - Korolev bold uppercase

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima quas ducimus, tempore unde ipsum doloribus consequuntur nulla, accusantium ad dolorem quasi. Deserunt quidem alias quas consectetur se qui, soluta optio corrupti?

Body text - lg to xxs

Default font family: FreightTextPro-Medium

large

poppins semi-bold lg

Big body text: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

large semi-bold

poppins semi-bold lg

Big body text: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

freight-text-pro bold

Body Text Bold: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

freight-text-pro medium

Body Text medium: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

freight-text-pro medium-italic

Body Text medium-italic: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

small

poppins semi-bold sm

Body Text Small Semibold: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

perspiciatis iure cum.

poppins sm

Body Text Small Regular: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

poppins semi-bold sm

Body Text Small Semibold: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

poppins semi-bold sm

Body Text Small Semibold: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

extra small

poppins semi-bold xs

Body Text semi-bold Extra Small: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

poppins xs

Body Text Extra Small: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

extra extra small

poppins medium xxs

Body Text medium Extra extra Small: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

poppins xxs

Body Text Extra extra Small: Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur perferendis voluptates porro sint architecto sit quidem, accusantium est suscipit aliquid optio provident commodi, nemo quibusdam explicabo iste perspiciatis iure cum.

Elements

Based on p tags

quote

quote poppins semi-bold

Quote

caption

caption freight-text-pro medium

Caption

caption freight-text-pro medium white

Caption

tag

tag poppins

Tag

tag poppins gray-medium

Tag gray

Plain text elements

Used in text editors

strong

bold

Lorem ipsum dolor sit amet consectetur, adipisicing elit. In saepe dolor recusandae quasi labore amet at fugit facere nisi perferendis expedita placeat neque rem fuga ducimus ipsum, et quas? Vero!

em

italic

Lorem ipsum dolor sit amet consectetur, adipisicing elit. In saepe dolor recusandae quasi labore amet at fugit facere nisi perferendis expedita placeat neque rem fuga ducimus ipsum, et quas? Vero!

link

a

Lorem ipsum dolor sit amet consectetur, adipisicing elit. In saepe dolor recusandae quasi labore amet at fugit facere nisi perferendis expedita placeat neque rem fuga ducimus ipsum, et quas? Vero!

Colors

Primary colors

black
gray-light
gray-medium
gray-dark
white

Secondary colors

yellow
mint
green
green-dark
red
purple
blue
blue-dark
orange-light

Buttons

Regular buttons

btn btn-primary poppins medium

Link

Button primary
btn btn-secondary poppins

Link

secondary
btn btn-secondary poppins medium

Link

secondary
btn btn-primary poppins medium

Form button

Arrow button

button

Selecting buttons

Radio buttons

Checkbox buttons

Social buttons

Social buttons

File buttons

File buttons

fileName.pdf

Lines

Lines in colors and thickness

Thickness - 1 though 12

Color - black (default), white, gray-light, gray-medium, gray-dark

thickness-2
white thickness-2
white thickness-4
white thickness-6
gray-medium thickness-2
gray-medium thickness-4
gray-medium thickness-6

vertical line

Dividers

Dividers with text

Divider H1 component

H1/2 Title

Divider H4 component

H4 Title

Divider H4 left component

H4 Title LEFT

Intro-divider component
Initiatief van Pensioenfonds Detailhandel

Jij&Wij Online is speciaal voor mensen met een hart voor retail, van vakkenvullers tot winkel-tycoons. Dus ben jij retailondernemer of -medewerker, dan is dit ook voor jou! Jij&Wij is een initiatief van Pensioenfonds Detailhandel, dat het pensioen beheert voor jou en 1,5 miljoen van je (ex)retailcollega’s.

Lees maar!

Innerpage nav

Dividers with navigation elements underneath

Innerpage nav

H1/2 Title

Shark fins

Different extra-extra-small to large and colors

back extra-large white

used for: big card

shark-fin shark-fin--back-large shark-fin--white

back large white

used for: big card

shark-fin shark-fin--back-large shark-fin--white

back large gray-light

used for: big card

shark-fin shark-fin--back-large shark-fin--gray-light

back medium white

Used for: Header big card, recommended component

shark-fin shark-fin--back-medium shark-fin--white

back medium gray-light

Used for: Header big card, recommended component

shark-fin shark-fin--back-medium shark-fin--gray-light

back small white

Used for: newsletter component, datavisulization

shark-fin shark-fin--back-small shark-fin--white

belly small white

Used for: Detail pages

shark-fin shark-fin--belly-small shark-fin--white

back extra-small white

Used for: comment component

shark-fin shark-fin--back-extra-small shark-fin--white

belly extra-small white

Used for: Detail pages

shark-fin shark-fin--belly-extra-small shark-fin--white

Chapeau underlined

Variations in colors chapeau/hr line

chapeau-underlined (mb-8 & mb-6)

chapeau-underlined

chapeau-underlined chapeau-underlined--v2 (mb-7 & mb-10)

chapeau-underlined--v2

Cluster component

...

Features

In portefeuille: dit doen Vuitton en Rolex voor jouw pensioen

Luxemerken als Louis Vuitton, Rolex en Balenciaga draaien topomzetten. Dat is fijn voor hen én voor jou: je pensioengeld zit deels in die bedrijven. En niet alleen voor het rendement, lees maar...

...

Features

Uitgelegd: het voordeel van jong starten met (pensioen)beleggen
...

Features

"Bij het nieuwe pensioen krijgt iedereen een eigen pensioenpot"
...

Features

Binnenkort met pensioen? Dit moet je doen!
Meer Kennis

Hero

Two version based on placing on detail or feature page