Digital styleguide

top

Typography

Headers H1 to H6

Default font family: poppins


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?

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?


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?

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?

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?


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?

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?

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?

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?

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?


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?

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?

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?


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?


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?


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?

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?

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?

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

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

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.


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.

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.

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

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.

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.

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.

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

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.

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

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.

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

btn btn-secondary poppins

Link

btn btn-secondary poppins medium

Link

btn btn-primary poppins medium

Form button

Arrow button

Selecting buttons


Radio buttons


Checkbox buttons

Social buttons


Social buttons

File buttons


File buttons

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
Zo beleggen we jouw pensioen

Initiatief van Pensioenfonds Detailhandel

Op dit platform ontdek je hoe wij jouw pensioen opbouwen door zorgvuldig en verantwoordelijk te beleggen.

Lees maar!

Innerpage nav

Dividers with navigation elements underneath


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

Newsletter cta's

three versions


newsletter-cta Footer

newsletter-cta Version 1

Don't use the p that's inside the component.

Use asset for image: src="assets/images/cartoons/Illustration6@2x.png"


newsletter-cta Version 2

don't use the h3 that's inside the component.

Use asset for image: src="assets/images/cartoons/Illustration6@2x.png"


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


Miljardenwinsten uit aardolie; 'groen’ groeit op lange termijn

Door de hoge energieprijzen maken oliemaatschappijen miljardenwinsten. Beleggers in ‘fossiel’ pakken daarmee snel fors rendement. De groene energiesector lijkt (nog) veel minder te profiteren. Hoe zit dat? En hoe zit Pensioenfonds Detailhandel daarin?

...

Ontwikkelingen

Nederlanders dol op 'gebruikt', vooral meubels
...

Features

Visueel: zoveel fossiele energie verbruik jij in je leven
...

Features

Beleggen in zonne-energie: Afrika theoretisch het gunstigst

Hero

Two version based on placing on detail or feature page