Design systeem

Table Of Contents

Headings - Fluid-responsive

Calculated on: https://websemantics.uk/tools/fluid-responsive-property-calculator/

H1

H1 - This is a heading.

min(max(2.375rem, calc(2.375rem + ((1vw - 0.32rem) * 2.5946))), 3.815rem); min-height: 0vw;
H2

H2 - This is a heading.

min(max(2rem, calc(2rem + ((1vw - 0.32rem) * 1.8955))), 3.052rem); min-height: 0vw;
H3

H3 - This is a heading.

min(max(2rem, calc(2rem + ((1vw - 0.32rem) * 0.7946))), 2.441rem); min-height: 0vw;
H4

H4 - This is a heading.

min(max(1.5625rem, calc(1.5625rem + ((1vw - 0.32rem) * 0.7036))), 1.953rem); min-height: 0vw;
H5
H5 - This is a heading.
min(max(1.4375rem, calc(1.4375rem + ((1vw - 0.32rem) * 0.2261))), 1.563rem); min-height: 0vw;
H6
H6 - This is a heading.
min(max(1.25rem, calc(1.25rem + ((1vw - 0.32rem) * 0))), 1.25rem); min-height: 0vw;
Body
Body - This is a heading.
min(max(1rem, calc(1rem + ((1vw - 0.32rem) * 0.2252))), 1.125rem); min-height: 0vw;

Buttons

Paragraph

Pudding bear claw tootsie roll danish wafer jujubes candy canes. Bear claw lemon drops cookie jelly beans chupa chups. Fruitcake liquorice cookie tootsie roll gingerbread macaroon brownie. Tart sesame snaps chocolate bar wafer danish oat cake cake pie ice cream. Topping tiramisu muffin sugar plum bear claw marshmallow chocolate bar icing bear claw. Halvah croissant toffee halvah candy jujubes liquorice carrot cake. Gingerbread caramels apple pie bear claw topping jujubes ice cream. Cheesecake gummies donut muffin jelly beans sugar plum lollipop. Dessert cake cake cotton candy tart dragée. Gummies cheesecake tootsie roll liquorice bear claw ice cream. Bonbon topping liquorice pudding dragée cake. Powder chupa chups toffee chocolate bar jujubes sugar plum donut chupa chups. Shortbread ice cream donut gingerbread cupcake gummi bears sweet roll muffin.

Rich Text

This is my rich text.

I am a subheading

This is more rich text.

  • I am a list

  • Lists are cool

Forms

Bij het klikken op 'Gratis aanmelden' ga je akkoord met onze voorwaarden. Dit formulier wordt beschermd met Google reCAPTCHA: privacy (opent in nieuw tabblad), voorwaarden (opent in nieuw tabblad).

Bij het klikken op 'Gratis aanmelden' ga je akkoord met onze voorwaarden. Dit formulier wordt beschermd met Google reCAPTCHA: privacy (opent in nieuw tabblad), voorwaarden (opent in nieuw tabblad).

Accordions

Crafting Your Digital Identity

Parallax on hover

Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position
Parallax Example3