This page represents a more structured version of the elements page. You can read when and how you should use the elements. Also there are more examples.

When you are adding a new element you should add the "element" class to it's own parent (wrap). This adds padding on the top and bottom of the element. If you don't need that you add one of the following classes on top: "no_padding", "no_padding_top" or "no_padding_bottom".

Most of the times you would add some space on the bottom of the page. Just add an empty div element with the "end_space" class to accomplish that.

Adding articles

Paragraph types

Standard, starting from the left.
Two column text
Extra content on the left
Text with an image on the right
Text with an image on the left

There are 5 types of paragraphs to build your article. You have to use the one that fits the content you would like to represent.

If you only want to represent text use the "standard" paragraph or the "two column" style.

If you are going to explain something or talk about something like these article types. You could should use the "content on the left" paragraph.

When you are going to display text with an image you can choose between "text with image" on the left and right.

Example article

This is a standard paragraph with text only. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Subtitle

This is a two column paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,

venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Another subtitle

This some text with an image on the right. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.

Another subtitle

This some text with an image on the left. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.

Text and image banners

Below you see examples of the banners. You should choose the one that fits your needs. You should not use banners with diffrent layouts on one page.

Banner with short title and an image

Below you see examples of the banners. You should choose the one that fits your needs. You should not use banners with diffrent layouts on one page.

A short title that needs extra attention.

Simple banner with image

This banner is usefull to show a small image so the page is not only text. This way the user does not get distracted.

Simple only text banner

Just replace the "green_bg" class with the "grey_bg" class to get a grey banner. This banner gives attention to a short title just like the first banner. But it does not need an image.

A short title that needs extra attention.

Adding a slider

You can choose whatever slider you want. Just copy the html and don't forget the required JavaScript in the footer.

Slider banner

High slider

Low slider

Slider with content

Test content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum montes, nascetur.

Test content

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Voorbeeld van een lange titel in een slider op de elementen pagina.

Text with icons

If you are going to add some items with a really short description. You could choose "text with icons". Just get as many as you need and change the icons.

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

Using cards

Use the card that fits best to your needs. You may use more than one card design on your page.

Price cards

Google G-Suite

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo