Assets

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 link

This is a unsorted list

  • Listitem 01
  • Listitem 02
  • Listitem 03
  • Listitem 04
  • Listitem 05

This is a sorted list

  1. Listitem 01
  2. Listitem 02
  3. Listitem 03
  4. Listitem 04
  5. 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.

 

Vergeet je gratis e-book niet!
Scoren op social media?
direct downloaden
Jouw gegevens
zijn 100% veilig