1. Home
  2. Components

Components

Visual

Ratio: Original

Ratio: 1:1

Ratio: 2:1

Ratio: 3:4

Ratio: 16:9


Grid

Halfs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Thirds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quaters

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Fifths

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

Justify start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Justify center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Justify end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Justify between

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Justify around

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Align start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Align center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Align end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Grid ul

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat pulvinar, dignissim ante non, fringilla nisl. Aliquam vitae lorem eget velit elementum volutpat sit amet vel ex.


Grid Gutter 0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.


Grid Gutter half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.


Grid Gutter 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget mi eleifend, sagittis magna ut, malesuada nunc. Cras in odio metus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci orci, fringilla at ex vel, efficitur pulvinar nibh.



Device helpers

Visibility

  • .show
  • .hide
  • .breakpoint + --show
  • .breakpoint + --hide

Text alignment

  • .text-left
  • .text-center
  • .text-right
  • .breakpoint + --text-left
  • .breakpoint + --text-center
  • .breakpoint + --text-right

Floats

  • .left
  • .right
  • .breakpoint + --left
  • .breakpoint + --right

Typography

Heading 1 (unique on page)

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The Pythagorean theorem is often expressed as the following equation:
a2 + b2 = c2

Almost every developer's favorite molecule is C8H10N4O2, also known as "caffeine".

Normal link - Not underlined link

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote
  • Unordered list item 1
    • Unordered list item 1.1
    • Unordered list item 1.2
    • Unordered list item 1.3
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  • Unstyled list item 1
  • Unstyled list item 2
  • Unstyled list item 3
  • List item 1
  • List item 2
  • List item 3
Dt item 1
Dd item 1
Dt item 2
Dd item 2
Title 1 Title 2 Title 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3

Buttons

Link
Link
Link
Link

Forms

  • Naam is verplicht
  • Geldig emailadres is verplicht

Het contactformulier werd succesvol verstuurd. Wij proberen dit zo snel mogelijk te behandelen.

Kies een optie *
Kies een optie

Modals


Matrix

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

345x220

blabla

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fantastische reis samen met de kids. We gaan zeker nog eens terug naar deze plek!

Anton Luyten

Een andere section

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nog een andere section

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.