Starter example
This text is bold
Deze pagina geeft een overzicht van de meest gebruikte elementen.
Heading 1 with bold text
Heading 2 with bold text
Heading 3 with bold text
Heading 4 with bold text
Heading 5 with bold text
Heading 6 with bold text
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
This is a unsorted list
- Listitem 01
- Listitem 02
- Listitem 03
- Listitem 04
- Listitem 05
This is a sorted list
- Listitem 01
- Listitem 02
- Listitem 03
- Listitem 04
- Listitem 05
Table
| Type | Column heading | Column heading | Column heading |
|---|---|---|---|
| Active | Column content | Column content | Column content |
| Default | Column content | Column content | Column content |
| Primary | Column content | Column content | Column content |
| Secondary | Column content | Column content | Column content |
| Success | Column content | Column content | Column content |
| Danger | Column content | Column content | Column content |
| Warning | Column content | Column content | Column content |
| Info | Column content | Column content | Column content |
| Light | Column content | Column content | Column content |
| Dark | Column content | Column content | Column content |
Classes
Some blocks can be given a class or classes, this will cause the content to be manipulated. If you want to use more than one class you have to leave a space between each class. Below are some examples
Example 01: the next block is a block “Tekst – 1 kolom” containing an image and a class “imgfullwidth”
When adding the photo, it is best to choose “Volledige grootte” under “Afmeting”
Example 02: the next block is a block “Foto en tekst” containing two images and has a class “hoverphotoslider”
This only works when two or more photos are selected, works best if “Positie foto” is set to “Foto rechts”
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean augue eros, condimentum eget dui vitae, blandit rhoncus enim. Sed in lectus sit amet ante cursus sodales. Proin metus mauris, pretium vitae fermentum vel, dapibus ut enim. Proin sed molestie enim. Pellentesque nulla metus, lobortis sit amet ipsum tincidunt, aliquam bibendum turpis. Phasellus viverra urna sit amet arcu tempus convallis. Maecenas mi mi, mollis et tempor ut, sollicitudin pellentesque elit. Sed facilisis, felis vel dapibus cursus, tortor augue malesuada libero, eu vehicula lacus ligula nec purus. Donec elementum magna quis ipsum ultricies, at aliquam mi efficitur. Suspendisse potenti. Praesent sagittis molestie nulla ac imperdiet. Maecenas leo dui, interdum eget auctor a, consequat vel elit. Sed mollis aliquam posuere.
Other classes
Note: more classes will be added in the future, explanations about this will be added here systematically.
bg-black : will give a dark background
mb-0 : will give a margin-bottom: 0px
boxed : will make your container a width of 60% start on 1200px
moreboxed : will make your container a width of 750px start on 768px
d-none : block wil not visible start from xs screen to xl screen
d-md-block: block is visible in blockvariant start by medium screen
d-md-flex: block is visible in flexvariant (most use) start by medium screen
md can you replace by screen index ( xs – s – md – l – xl)
Margin bottom System
We rewrite the margin bottom system. For the base we use the standard bootstrap system with the classes mb-0 to mb-6.
Every block gets the default class mb-3. Only you will not find it in the builder in the field ‘CSS classes’. This margin is assigned internally so it can be overwritten.
The marginbottom system actually uses a formula, namely:
marginbottom = prefix * basevalue
The simplest is of course mb-0. This ensures that we have no margin at the bottom of the block.
The other classes use a basevalue. This value depends on the screen size.
extra small (xs) screen width <768px : 10
small (s) screen width ≥768px : 15
medium (m) screen width ≥992px : 20
large (l) screen width ≥1200px : 25
extra large (xl) width screen ≥1400px : 30
extra large (xxl) width screen ≥1600px : 40
If we combine these 2 values we get the following table:
|
mb |
xs |
s |
m |
l |
xl |
xxl |
|
1 |
10 |
15 |
20 |
25 |
30 |
40 |
|
2 |
20 |
30 |
40 |
50 |
60 |
80 |
|
3 |
30 |
45 |
60 |
75 |
90 |
120 |
|
4 |
40 |
60 |
80 |
100 |
120 |
160 |
|
5 |
50 |
75 |
100 |
125 |
150 |
200 |
|
6 |
60 |
90 |
120 |
150 |
180 |
240 |
An example:
We have a block and give it the class mb-6, this will result in the following configuration:
On extra small screen: 60px as margin bottom,
on small this gives 90px,
on medium this gives 120px,
on large this will be 150px,
on extra large this will come up 180
and on extra extra large this will be 240px.
