Skip to main content

Style Management

The following labels refer to styling options/classes in the "STYLE" dropdown menu located in the toolbar in every Custom HTML Module's content editor:

Search Jobs

Page Templates

What page templates are available to create new pages with?

The following page templates are available in the "CMS Primary Theme" theme:

In which theme should I create my page? / Which theme should my page be assigned to?

To use one of the page templates, you must create your page inside the theme where the desired page template resides. You may later assign the page to another theme if needed.

See General Advice & FAQs for more details.

What if I don't need all the sections used in a template?

Before using a CMS page template to create a page, determine if you’re going to need all the sections used in that template. Then, after using the template to create a new page, remove the sections from the page which aren’t needed BEFORE SAVING THE NEW PAGE. This prevents those sections from ever being created and we avoid cluttering the system with unused sections and modules.

Can I create a CMS page without using one of the CMS Page Templates?

See General Advice & FAQs.

Custom HTML Modules: Content Editor (WYSIWYG) FAQs

How do I replace placeholder ("lorem ipsum") or unwanted text content?

The content editor can be finicky. To replace placeholder or unwanted text, we recommend that you first click the “BLOCKS” button in the toolbar to reveal outlines surrounding block-level elements. Then, select the text you wish to replace and type in your desired text. Or, you can place your cursor at the end of the text you want to replace, add your desired text, and then select and delete the placeholder text preceding it. We do NOT recommend selecting all placeholder text in the editor and deleting it before you add your desired content. As a result you may accidentally erase necessary markup that the content depends on. It is always best to edit text elements one at a time rather than deleting everything you don’t want from the start.

Can I copy/paste from other sources?

Be very careful when copy/pasting text content from other sources into a Custom HTML module's content editor. When copying from an external document, take steps to ensure the text you are copying is plain text (as opposed to rich text.) When copying from a web page, make sure you are ONLY including text and not actual HTML tags (<p>, <br>, etc.) as this could result in unintended styling/format inconsistencies.

How do I change the appearance of text content (color, font size, etc)?

The "STYLE" dropdown in the toolbar can be used to edit the styling/appearance of content. Keep in mind that when you add a style from the dropdown, it does not overwrite other styles previously applied to the element. This allows greater flexibility in cases where you may need more than one style applied, but you will need to remember to uncheck undesired styles after applying them.

Please refer to Style Management for examples of classes/styles you may apply.

Keep in mind that changing the appearance or styles of text should be done SPARINGLY - for the sake of consistency across pages, it is best to stick with the module's default styling whenever possible.

How do I add/edit a link?

The "insert/edit link" button in the toolbar is used to create and modify links:

To create a new link, type your desired link text within the content editor, select it, and then click the "insert/edit link" button. This may be tricky if you're creating a new link next to an already-existing link. To do this, place your cursor at the end of the existing link's text and then press the right arrow key, so your cursor is outside the existing link. Then, type the new link's text, select it and click the "insert/edit link" button.

To modify an existing link, click into the middle of the link text within the content editor, then click the "insert/edit link" button.

Note: Using proper link text is very important. For more details, see "Does it matter what I use for [clickable] link text?" in General Advice & FAQs.

How do I add/edit an image?

The "asset picker" button in the toolbar allows you to add images into the content editor. To modify an existing asset, click the asset and then click the "asset picker" button. Not all custom HTML modules were made with the intent to have an image placed in them. (Tip: If your default placeholder content did not contain an image, you should probably avoid adding one with this tool.)

Note: If you're including an image in a Custom HTML module, remember to consider the image alt text (which is editable through the "asset picker" button), and include a value when necessary. For more details, see "Do I need to update/include alt text for every image?" in General Advice & FAQs.

How do I add a code snippet?

The "insert code snippet" button in the toolbar adds pre-made snippets of code into the content editor. Note that code snippets are often (but not always) used as a way to revert either the entire content of a Custom HTML Module to its default state, or to revert a part of its content to its original state. In many cases you will not need to use code snippets unless you're attempting to "fix" a module (i.e. bring back original content which was since removed.)

Additionally, code snippets are used as a way to add specific html into your content editor that is either difficult or impossible to achieve without editing the actual source code.

IMPORTANT: Be very careful to only use code snippets that are intended for use in the specific module you’re editing. In most cases the name of the code snippet should partially or exactly match the name of the module you’re editing. A list of all code snippets that are intended for use within a module will appear in that module's parent section's documentation in the Section Guide. Do not use a code snippet when the section name in the title of the code snippet does not match the section you are currently editing. For example, if you're editing a section created from a section template labeled as "Section 1" you should only be using code snippets whose titles include "Section 1."

I've messed up my edits and would like to revert to the original "lorem ipsum" placeholder content. Is there a way to do that?

Check to see if the module you're editing has a default code snippet available. The name of the snippet should match the name of your module (minus the given section name prefix.) If so, you may delete the entire content and then insert the appropriate code snippet. Some modules don't have default code snippets available, but they may have other snippets which could replace specific portions of your content.

Does it matter which levels of headings (H1, H2, etc) I use in my content?

Yes. For SEO and accessibility purposes, it is important that your page’s heading structure is hierarchical. This means that your page’s top heading needs to be an h1 heading.

You should also be careful to avoid skipping heading levels (i.e. using an h3 heading before an h2 has been used, etc.) If you need to change the appearance of a heading without changing the level, apply one of the heading classes from the content editor's "STYLE" dropdown (see Style Management for a list of these heading style classes.)

General Advice & FAQs

How can I ensure that my content will be accessible to all users?

Be sure to follow all recommendations and instructions given in this guide, particularly the recommendations involving link text, image alt text, and heading levels. To learn more about accessibility, please see Accessibility for Radancy CMS Publishers.

Can I change the layout assignment of a page/section/module?

You should never change a layout assignment unless specifically instructed to do so in the relevant section's documentation found in the Section Guide. This will almost always lead to unintended results.

Can I add a module to a section?

You should never add a module to a section unless specifically instructed to do so in the relevant section's documentation found in the Section Guide. This will almost always lead to unintended results.

When I'm adding a section from the "Add New" section menu to a page, what should I name my new section?

To avoid future confusion, especially for other CMS users who may need to edit/update the content you're creating, naming conventions should be consistent throughout the site. When creating a section that you anticipate will only be used on the page you're adding it to, we recommend the following naming convention: [Page Name OR Abbreviated Page Name] - [Section Template Name] [Number (only include if you anticipate other sections of the same template will be added to the same page.)] For example, "Benefits - Full Width Copy" or "DEI - Full Width Copy 1." If you anticipate that the section you're creating may be used on other pages as well, we suggest giving it a name that summarizes its purpose/intent rather than its content or context (which may change or be updated later.) For example, "Human Resources Job List" or "Annual Job Fair CTA."

Note: While you CAN change a section's name after creating it, you will NOT be able to change the names of the modules included in the section (which will, by default, include the ORIGINAL section name.) So we recommend that you carefully choose a good name for each section you create.

Can I create a CMS page without using one of the CMS Page Templates?

Yes, but this is not recommended as creating a page without using a CMS Page Template will require you to select a page layout. To avoid selecting the incorrect layout, we recommend using one of the available CMS Page Templates, in all cases.

If you are looking to create a "blank" page, see the next question.

How do I create a "blank" page?

To create a blank page, click the "Add Page" button in the "CMS Primary Theme" theme and select the [TEMPLATE NAME] page template.

Which theme should my page be assigned to?

All CMS pages should be assigned to the "CMS Primary Theme" theme.

DO NOT assign any CMS pages to the "Default Theme (GST)" theme. This theme is enabled for CMS due to system requirements, but it is NOT intended to be used as a theme for CMS Pages.

Do I need to update/include alt text for every image?

Every time you add or replace an image file, you should consider whether to include alt text for the image. In some cases, such as when the image is considered descriptive and not essential to the page content, alt text may be left blank. For more details, please see this alt text decision tree. Not only are these considerations essential in making the site accessible to non-visual users, it will also improve SEO.

Does it matter what I use for [clickable] link text?

It matters a lot. To make links accessible to all users, use link text that would make sense to users if taken out of the surrounding context. For example, "learn more about our benefits" is acceptable, whereas "click here" or "learn more" are not. This is important in all situations but be particularly careful when adding/editing links inside Custom HTML modules, as you'll have full control over what text is included in a link.

How do I update/add a hero banner to my page?

Upload your page's banner images via the "Mobile Banner" and "Desktop Banner" fields found in your page's "Banner" settings. You may also include banner text via the "Headline" and "Short Description" fields (optional.) When these fields are not left blank/empty, they will be leveraged to produce a hero banner section for your page.

Note that the page banner will show when only one of the "Mobile Banner" and "Desktop Banner" image fields are configured, but this should be avoided. Always include both images when setting up a banner.

Note that the recommended MOBILE banner image size is 768x250 (384:175 Aspect Ratio), while the recommended DESKTOP image size is 1920x334 (960:167 Aspect Ratio.) If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

CMS User Notes

How can I add to or update the notes to this section?

Find this section - "CMS Guide - CMS User Notes - (Section 10a)" - in your section list and edit its "Section 10 - CMS Guide - CMS User Notes" Custom HTML Module to add as many notes as you'd like right here. Be careful to not delete this instructional text, so that it may be referenced later on.

Add your notes below:

Section Guide

Important! Before using a section from this guide, please read the corresponding documentation for that section. Documentation is found above each section in this guide.

Note that section titles are color coded based on which menu they can be found in after clicking the "add section" button on any page:

Red - find this section in the "Use Existing" Menu.
Green - find this section in the "Add New" Menu.

Keep in mind that when you edit a section from the "Use Existing" Menu, you are editing every instance of that section. Sections added via the "Add New" Menu are safe to be edited freely, as a new instance of the section is created every time it's added to a page.

Copy - (Section 9a)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 9 - Copy: Use as a "reset" for any "Section 9 - Copy" module.

Onderaan de streep mensenwerk.

Copy - (Section 9b)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 9 - Copy: Use as a "reset" for any "Section 9 - Copy" module.

Onderaan de streep mensenwerk.

Copy - (Section 9c)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 9 - Copy: Use as a "reset" for any "Section 9 - Copy" module.

Onderaan de streep mensenwerk.

Copy - (Section 9d)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 9 - Copy: Use as a "reset" for any "Section 9 - Copy" module.

Onderaan de streep mensenwerk.

Copy - (Section 9e)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 9 - Copy: Use as a "reset" for any "Section 9 - Copy" module.

Onderaan de streep mensenwerk.

Copy - (Section 9f)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 9 - Copy: Use as a "reset" for any "Section 9 - Copy" module.

Onderaan de streep mensenwerk.

Copy - (Section 9g)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 9 - Copy: Use as a "reset" for any "Section 9 - Copy" module.

Onderaan de streep mensenwerk.

Copy - (Section 10a)

Suggested Use: General copy..

Notes: The "Section 10 - Copy" module includes an H2 heading by default. See the question User should not add other components to this module apart from text within an H2 tag.

Available Code Snippets:

  • v1 - Section 10 - Copy: Use as a "reset" for any "Section 10 - Copy" module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Copy - (Section 10b)

Suggested Use: General copy..

Notes: The "Section 10 - Copy" module includes an H2 heading by default. See the question User should not add other components to this module apart from text within an H2 tag.

Available Code Snippets:

  • v1 - Section 10 - Copy: Use as a "reset" for any "Section 10 - Copy" module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Copy - (Section 10c)

Suggested Use: General copy..

Notes: The "Section 10 - Copy" module includes an H2 heading by default. See the question User should not add other components to this module apart from text within an H2 tag.

Available Code Snippets:

  • v1 - Section 10 - Copy: Use as a "reset" for any "Section 10 - Copy" module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Copy - (Section 10d)

Suggested Use: General copy..

Notes: The "Section 10 - Copy" module includes an H2 heading by default. See the question User should not add other components to this module apart from text within an H2 tag.

Available Code Snippets:

  • v1 - Section 10 - Copy: Use as a "reset" for any "Section 10 - Copy" module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Copy - (Section 10e)

Suggested Use: General copy..

Notes: The "Section 10 - Copy" module includes an H2 heading by default. See the question User should not add other components to this module apart from text within an H2 tag.

Available Code Snippets:

  • v1 - Section 10 - Copy: Use as a "reset" for any "Section 10 - Copy" module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Copy - (Section 10f)

Suggested Use: General copy..

Notes: The "Section 10 - Copy" module includes an H2 heading by default. See the question User should not add other components to this module apart from text within an H2 tag.

Available Code Snippets:

  • v1 - Section 10 - Copy: Use as a "reset" for any "Section 10 - Copy" module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Copy - (Section 10g)

Suggested Use: General copy..

Notes: The "Section 10 - Copy" module includes an H2 heading by default. See the question User should not add other components to this module apart from text within an H2 tag.

Available Code Snippets:

  • v1 - Section 10 - Copy: Use as a "reset" for any "Section 10 - Copy" module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Copy - (Section 11a)

Suggested Use: The "Section 11 - Copy" module includes an H2 heading and Paragraph + all variants of underordered lists by default. User should only include unordered list in this module and in not any other VARIANT. USER can only use these snippets mentioned below in this SECTION only.

Available Code Snippets Per BRAND:

BRAND: DEFAULT CAK

  • v1 - Custom List Style - Tick Used for Brand : "DEFAULT CAK".
  • v1 - Custom List Style - Plus Used for Brand : "DEFAULT CAK".
  • v1 - Inner Box - CAK Used for Brand : "DEFAULT CAK".

BRAND: Klantcontact

  • v1 - Custom List Style - Tick - Green Used for Brand : "Klantcontact".
  • v1 - Custom List Style - Plus - Green Used for Brand : "Klantcontact".
  • v1 - Inner Box - Klantcontact Used for Brand : "Klantcontact".

BRAND: ICT en Data

  • v1 - Custom List Style - Tick - Yellow Used for Brand : "ICT en Data".
  • v1 - Custom List Style - Plus - Yellow Used for Brand : "ICT en Data".
  • v1 - Inner Box - ICT en Data Used for Brand : "ICT en Data".

BRAND: Juridisch

  • v1 - Custom List Style - Tick - Pink Used for Brand : "Juridisch".
  • v1 - Custom List Style - Plus - Pink Used for Brand : "Juridisch".
  • v1 - Inner Box - Juridisch Used for Brand : "Juridisch".

BRAND: Financieel

  • v1 - Custom List Style - Tick - Royal Blue Used for Brand : "Financieel".
  • v1 - Custom List Style - Plus - Royal Blue Used for Brand : "Financieel".
  • v1 - Inner Box - Used for Brand : "Financieel".

BRAND: Strategie en Beleid

  • v1 - Custom List Style - Tick - Blue Used for Brand : "Strategie en Beleid".
  • v1 - Custom List Style - Plus - Blue Used for Brand : "Strategie en Beleid".
  • v1 - Inner Box - "Strategie en Beleid Used for Brand : "Strategie en Beleid".

BRAND: Staf

  • v1 - Custom List Style - Tick - Purple Used for Brand : "Staf".
  • v1 - Custom List Style - Plus - Purple Used for Brand : "Staf".
  • v1 - Inner Box - Staf Used for Brand : "Staf".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets:

  • v1 - Section 11 - Copy: Use as a "reset" for any "Section 11 - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.

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.

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.

Copy - (Section 11b)

Suggested Use: This variant [of Section 11a] is identical, except that it has a set background and user is advised to ONLY include: Title,General copy and shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 11 - Default Copy: Use as a "reset" for any "Section 11 - Default Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Copy - (Section 11c)

Suggested Use: This variant [of Section 11a] is identical, except that it has a set background and user is advised to ONLY include: Title,General copy and shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 11 - Default Copy: Use as a "reset" for any "Section 11 - Default Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Copy - (Section 11d)

Suggested Use: This variant [of Section 11a] is identical, except that it has a set background and user is advised to ONLY include: Title,General copy and shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 11 - Default Copy: Use as a "reset" for any "Section 11 - Default Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Copy - (Section 11e)

Suggested Use: This variant [of Section 11a] is identical, except that it has a set background and user is advised to ONLY include: Title,General copy and shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 11 - Default Copy: Use as a "reset" for any "Section 11 - Default Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Copy - (Section 11f)

Suggested Use: This variant [of Section 11a] is identical, except that it has a set background and user is advised to ONLY include: Title,General copy and shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 11 - Default Copy: Use as a "reset" for any "Section 11 - Default Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Copy - (Section 11g)

Suggested Use: This variant [of Section 11a] is identical, except that it has a set background and user is advised to ONLY include: Title,General copy and shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 11 - Default Copy: Use as a "reset" for any "Section 11 - Default Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Copy - (Section 11h)

Suggested Use: This variant [of Section 11a] is identical, except that it has a set background and user is advised to ONLY include: Title,General copy and shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 11 - Default Copy: Use as a "reset" for any "Section 11 - Default Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Media and Copy - (Section 12a)

Suggested Use: Shorter copy facing a supporting image or video.

Notes: The recommended image size for the "Section 12 - Media" module is 590x590 (1:1 Aspect Ratio.) If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

On mobile screens, the image/video will always appear above the copy.

To modify the visual order of the image/video and the copy on larger screens, simply click and drag each of the 2 modules into the opposite column of the section. Keep in mind this will not affect the section's preview image, which will reflect the original layout.

Available Code Snippets:

  • v1 - Section 12 - Copy: Use as a "reset" for any "Section 12 - Copy" Module.

Lorem Ipsum Dolor

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Primary Button

Media and Copy - (Section 12b)

Suggested Use: See Section 12a.

Notes: See Section 12a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets: See Section 12a.

Lorem Ipsum Dolor

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

Primary Button

CTA - (Section 13a)

Suggested Use: A single, full-width - (image, title, description and links)

Notes: The recommended image size for a "Section 13 - Link" module is 1200x640 (15:8 Aspect Ratio.) If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

The thumbnail images, titles, and descriptions represent data and can be edited inside "Section 18 - Image and Copy - [number]". User can update thumbnail image, title, or description and link.

It is not possible to customize the styling of the text in this module, or to change the button text data.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Name and Job title

CTA - (Section 13b)

Suggested Use: See Section 13a.

Notes: See Section 13a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Name and Job title

CTA - (Section 13c)

Suggested Use: See Section 13a.

Notes: See Section 13a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Name and Job title

CTA - (Section 13d)

Suggested Use: See Section 13a.

Notes: See Section 13a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Name and Job title

CTA - (Section 13e)

Suggested Use: See Section 13a.

Notes: See Section 13a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Name and Job title

CTA - (Section 13f)

Suggested Use: See Section 13a.

Notes: See Section 13a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Name and Job title

CTA - (Section 13g)

Suggested Use: See Section 13a.

Notes: See Section 13a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.

Name and Job title

Video Slider - (Section 15b)

Suggested Use: A single, full-width "media" item. The "media" item may be an image, an image with caption/decription, or a video.

Notes: The recommended image size for the "Section 15 - Media - [number]" module is 1200x640 (15:8 Aspect Ratio.) If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

It is not possible to customize the styling of the text beneath video.

When a "Section 15 - Media - [number]" module is set to any of the "video" media types, its "placeholder" image functions as a button, with a play icon overlayed on top. Upon clicking the image/button, the video will play.

To add additional "videos" to the slider, click the "copy" icon button on the last "Section 15 - Media - [number]" module in your section. Give the new module the same name as the one you copied, incremementing the number at the end of the module name by 1 (for example, if the module you copied has a name ending in "4", the new module's name should end with "5".)

If an introductory heading and/or copy is not desired, remove the "Section 15 - Copy" module from your section.

Available Code Snippets: N/A

  • v1 - Section 15 - Copy: Use as a "reset" for any "Section 15 - Copy" Module.

Title

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.

Contact Info - (Section 17a)

Suggested Use:

Notes:

The recommended sizes to ensure correct display and avoid cropping issues. The required image size for desktop is 225 × 225 (1:1 Aspect Ratio.), and for mobile devices it is 315 × 160(2:1 aspect ratio) pixels.If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

The contact image, name, title, description, and links are data-driven and can be edited within the “Section 17 – Contact Info Copy” module.

If an introductory heading, copy, or links are not required, the “Section 17 – Contact Info Copy” module can be removed from the section.

If an introductory heading and/or copy is not desired, remove the "Section 17 - Copy" module from your section.

Available Code Snippets:

  • v1 - Section 17 - Copy: Use to "reset" any "Section 17 - Copy" module.
  • v1 - Section 17 - Contact Info Copy: Use to "reset" any "Section 17 - Contact Info Copy" module.

Contact Info - (Section 17b)

Suggested Use:

Notes:

See Section 17a. This variant is identical, except for the visual order of the image and copy on larger screens.

Available Code Snippets:

  • v1 - Section 17 - Copy: Use to "reset" any "Section 17 - Copy" module.
  • v1 - Section 17 - Contact Info Copy: Use to "reset" any "Section 17 - Contact Info Copy" module.

Contact Info - (Section 17c)

Suggested Use:

Notes:

See Section 17a. This variant is identical, except for the visual order of the image and copy on larger screens.

Available Code Snippets:

  • v1 - Section 17 - Copy: Use to "reset" any "Section 17 - Copy" module.
  • v1 - Section 17 - Contact Info Copy: Use to "reset" any "Section 17 - Contact Info Copy" module.

Contact Info - (Section 17d)

Suggested Use:

Notes:

See Section 17a. This variant is identical, except for the visual order of the image and copy on larger screens.

Available Code Snippets:

  • v1 - Section 17 - Copy: Use to "reset" any "Section 17 - Copy" module.
  • v1 - Section 17 - Contact Info Copy: Use to "reset" any "Section 17 - Contact Info Copy" module.

Contact Info - (Section 17e)

Suggested Use:

Notes:

See Section 17a. This variant is identical, except for the visual order of the image and copy on larger screens.

Available Code Snippets:

  • v1 - Section 17 - Copy: Use to "reset" any "Section 17 - Copy" module.
  • v1 - Section 17 - Contact Info Copy: Use to "reset" any "Section 17 - Contact Info Copy" module.

Contact Info - (Section 17f)

Suggested Use:

Notes:

See Section 17a. This variant is identical, except for the visual order of the image and copy on larger screens.

Available Code Snippets:

  • v1 - Section 17 - Copy: Use to "reset" any "Section 17 - Copy" module.
  • v1 - Section 17 - Contact Info Copy: Use to "reset" any "Section 17 - Contact Info Copy" module.

Contact Info - (Section 17g)

Suggested Use:

Notes:

See Section 17a. This variant is identical, except for the visual order of the image and copy on larger screens.

Available Code Snippets:

  • v1 - Section 17 - Copy: Use to "reset" any "Section 17 - Copy" module.
  • v1 - Section 17 - Contact Info Copy: Use to "reset" any "Section 17 - Contact Info Copy" module.

Multi Item - (Section 18a)

Suggested Use: A group of links in "card" format (image, title, and description), with introductory copy above (optional.)

Notes: It is not possible to customize the styling of the text in each "card" item, or to include any additional links, headings, line breaks, etc.

If an introductory heading and/or copy is not desired, remove the "Section 18 - Copy" module from your section.

To reduce the number of "card" items, remove the undesired "Section 18 - Link [number]" module(s) from your section.

To add additional "card" items, click the "copy" icon button on the last "Section 18 - Image and Copy - [number]" module in your section. Give the new module the same name as the one you copied, incremementing the number at the end of the module name by 1 (for example, if the module you copied has a name ending in "4", the new module's name should end with "5".)

On mobile screens, the image/video will always appear above the copy.

The thumbnail images, titles, and descriptions represent data and can be edited inside "Section 18 - Image and Copy - [number]". User can update thumbnail image, title, or description and link.

Available Code Snippets:

  • v1 - Section 18 - Copy: Use to "reset" any "Section 18 - Copy" module.

Multi Item - (Section 18b)

Suggested Use: See Section 18a.

Notes: See Section 18a. This variant is identical, except for the visual order of the image/video and copy on larger screens.

Available Code Snippets:

  • See Section 18a.

Video - (Section 19)

Suggested Use: A single, full-width "media" item. The "media" item may be an image, an image with caption/decription, or a video.

Notes: The recommended image size for the "Section 19 - Media" module is 1200x640 (15:8 Aspect Ratio.) If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

When a "Section 19 - Media" module is set to any of the "video" media types, its "placeholder" image functions as a button, with a play icon overlayed on top. Upon clicking the image/button, the video opens in a lightbox/modal window.

The image caption/description will only be included if the "Section 19 - Media" module is set to a media type of "Html5." Note that it is not possible to customize the styling of the caption/description, or include any links, headings, line breaks, etc. If a caption/description is not desired, leave the "Section 24 - Media" module's description field empty.

Available Code Snippets: N/A

Multi Item - (Section 20)

Suggested Use: A group of links in "card" format (image, title, and description), with introductory copy above (optional.)

Notes: The recommended image size for a "Section 20 - Link [number]" module is 245x145 (49:29 Aspect Ratio.) If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

Each "card" item functions as a link. It is not possible to have "card" items that do NOT function as links.

It is not possible to customize the styling of the text in each "card" item, or to include any additional links, headings, line breaks, etc.

If an introductory heading and/or copy is not desired, remove the "Section 20 - Copy" module from your section.

To reduce the number of "card" items, remove the undesired "Section 20 - Link [number]" module(s) from your section.

To add additional "card" items, click the "copy" icon button on the last "Section 23 - Link [number]" module in your section. Give the new module the same name as the one you copied, incremementing the number at the end of the module name by 1 (for example, if the module you copied has a name ending in "4", the new module's name should end with "5".)

On larger screens, the "card" items appear in a 2-column grid layout. If the final row includes less than 2 items, the items are centered in that row.

Available Code Snippets:

  • v1 - Section 20 - Copy: Use to "reset" any "Section 20 - Copy" module.

Related Stories - (Section 21a)

Suggested Use: A set of 3 "related content" links in "card" format (image, title, and description) that are manually selected by user.

Notes: All content pages and offsite content pages are available to be selected as links.

The thumbnail images, titles, and descriptions represent all data that cannot be edited inside this section. To edit a content page or offsite content page's thumbnail image, title, or description, go to the relevant page's settings and update the fields there. Note that if a page does not have a thumbnail image configured in its settings, a "default" thumbnail image will be rendered instead. This "default" thumbail image cannot be updated in CMS Admin, so please contact your Customer Support Specialist (CSS) if a new "default" thumbnail image is needed.

If an introductory heading and/or copy is not desired, remove the "Section 21 - Copy" module from your section.

Available Code Snippets: N/A

  • v1 - Section 21 - Copy: Use to "reset" any "Section 21 - Copy" module.

Title

Maecenas tempus, tellus eget condimentum rhoncus, sem quam

Related Stories - (Section 21b)

Suggested Use: See Section 21a.

Notes: See Section 21a.

Available Code Snippets:

  • See Section 21a.

Title

Maecenas tempus, tellus eget condimentum rhoncus, sem quam

Related Stories - (Section 21c)

Suggested Use: See Section 21a.

Notes: See Section 21a.

Available Code Snippets:

  • See Section 21a.

Title

Maecenas tempus, tellus eget condimentum rhoncus, sem quam

Related Stories - (Section 21d)

Suggested Use: See Section 21a.

Notes: See Section 21a.

Available Code Snippets:

  • See Section 21a.

Title

Maecenas tempus, tellus eget condimentum rhoncus, sem quam

Related Stories - (Section 21e)

Suggested Use: See Section 21a.

Notes: See Section 21a.

Available Code Snippets:

  • See Section 21a.

Title

Maecenas tempus, tellus eget condimentum rhoncus, sem quam

Related Stories - (Section 21f)

Suggested Use: See Section 21a.

Notes: See Section 21a.

Available Code Snippets:

  • See Section 21a.

Title

Maecenas tempus, tellus eget condimentum rhoncus, sem quam

Related Stories - (Section 21g)

Suggested Use: See Section 21a.

Notes: See Section 21a.

Available Code Snippets:

  • See Section 21a.

Title

Maecenas tempus, tellus eget condimentum rhoncus, sem quam

CTA - (Section 27)

Suggested Use: A single, full-width - (image, title, description and links)

Notes: The recommended image size for a "Section 27 - Link" module is 1200x640 (15:8 Aspect Ratio.) If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

The thumbnail images, titles, and descriptions represent data and can be edited inside "Section 27 - Image and Copy - [number]". User can update thumbnail image, title, or description and link.

It is not possible to customize the styling of the text in this module, or to change the button text data.

Available Code Snippets: N/A

Hero - (Section 36d)

Suggested Use: CMS hero banner.

Notes: The recommended MOBILE image size for the "Section 36 - Media" module is 640x500, while the recommended image size for LARGER SCREENS is 1440x514 If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

User can replace the background image in is handled in the relevant page's settings and update the fields there.

Set up:

The banner text/logic & imagery is handled in the relevant page's settings and update the fields there - [Dekstop Banner, Mobile Banner, Headline & Short Description field]. AND NOT VIA SECTION GUIDE.

All banner variations are controlled via page layout selected (listed below):

  • v1 - Content Page - CMS
  • v1 - Strategie en Beleid Page
  • v1 - Klantcontact Page
  • v1 - ICT en data Page
  • v1 - Juridisch Page
  • v1 - Financieel Page
  • v1 - Staf Page

By default when a user creates a page based of v1 - Content Page - CMS page layout the banner will posses the blue colour styling.

Per page creation a User has the ability to select the layout of choice as he wishes in order to have the correct banner variation needed.

ALL existing templates have already been assigned the appropriate layout.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet.

Onderaan de streep mensenwerk.

Hero - (Section 36e)

Suggested Use: CMS hero banner.

Notes: The recommended MOBILE image size for the "Section 36 - Media" module is 640x500, while the recommended image size for LARGER SCREENS is 1440x514 If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

User can replace the background image in is handled in the relevant page's settings and update the fields there.

Set up:

The banner text/logic & imagery is handled in the relevant page's settings and update the fields there - [Dekstop Banner, Mobile Banner, Headline & Short Description field]. AND NOT VIA SECTION GUIDE.

All banner variations are controlled via page layout selected (listed below):

  • v1 - Content Page - CMS
  • v1 - Strategie en Beleid Page
  • v1 - Klantcontact Page
  • v1 - ICT en data Page
  • v1 - Juridisch Page
  • v1 - Financieel Page
  • v1 - Staf Page

By default when a user creates a page based of v1 - Content Page - CMS page layout the banner will posses the blue colour styling.

Per page creation a User has the ability to select the layout of choice as he wishes in order to have the correct banner variation needed.

ALL existing templates have already been assigned the appropriate layout.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet.

Onderaan de streep mensenwerk.

Hero - (Section 36f)

Suggested Use: CMS hero banner.

Notes: The recommended MOBILE image size for the "Section 36 - Media" module is 640x500, while the recommended image size for LARGER SCREENS is 1440x514 If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

User can replace the background image in is handled in the relevant page's settings and update the fields there.

Set up:

The banner text/logic & imagery is handled in the relevant page's settings and update the fields there - [Dekstop Banner, Mobile Banner, Headline & Short Description field]. AND NOT VIA SECTION GUIDE.

All banner variations are controlled via page layout selected (listed below):

  • v1 - Content Page - CMS
  • v1 - Strategie en Beleid Page
  • v1 - Klantcontact Page
  • v1 - ICT en data Page
  • v1 - Juridisch Page
  • v1 - Financieel Page
  • v1 - Staf Page

By default when a user creates a page based of v1 - Content Page - CMS page layout the banner will posses the blue colour styling.

Per page creation a User has the ability to select the layout of choice as he wishes in order to have the correct banner variation needed.

ALL existing templates have already been assigned the appropriate layout.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet.

Onderaan de streep mensenwerk.

Hero - (Section 36g)

Suggested Use: CMS hero banner.

Notes: The recommended MOBILE image size for the "Section 36 - Media" module is 640x500, while the recommended image size for LARGER SCREENS is 1440x514 If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

User can replace the background image in is handled in the relevant page's settings and update the fields there.

Set up:

The banner text/logic & imagery is handled in the relevant page's settings and update the fields there - [Dekstop Banner, Mobile Banner, Headline & Short Description field]. AND NOT VIA SECTION GUIDE.

All banner variations are controlled via page layout selected (listed below):

  • v1 - Content Page - CMS
  • v1 - Strategie en Beleid Page
  • v1 - Klantcontact Page
  • v1 - ICT en data Page
  • v1 - Juridisch Page
  • v1 - Financieel Page
  • v1 - Staf Page

By default when a user creates a page based of v1 - Content Page - CMS page layout the banner will posses the blue colour styling.

Per page creation a User has the ability to select the layout of choice as he wishes in order to have the correct banner variation needed.

ALL existing templates have already been assigned the appropriate layout.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet.

Onderaan de streep mensenwerk.

Hero - (Section 36h)

Suggested Use: CMS hero banner.

Notes: The recommended MOBILE image size for the "Section 36 - Media" module is 640x500, while the recommended image size for LARGER SCREENS is 1440x514 If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

User can replace the background image in is handled in the relevant page's settings and update the fields there.

Set up:

The banner text/logic & imagery is handled in the relevant page's settings and update the fields there - [Dekstop Banner, Mobile Banner, Headline & Short Description field]. AND NOT VIA SECTION GUIDE.

All banner variations are controlled via page layout selected (listed below):

  • v1 - Content Page - CMS
  • v1 - Strategie en Beleid Page
  • v1 - Klantcontact Page
  • v1 - ICT en data Page
  • v1 - Juridisch Page
  • v1 - Financieel Page
  • v1 - Staf Page

By default when a user creates a page based of v1 - Content Page - CMS page layout the banner will posses the blue colour styling.

Per page creation a User has the ability to select the layout of choice as he wishes in order to have the correct banner variation needed.

ALL existing templates have already been assigned the appropriate layout.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet.

Onderaan de streep mensenwerk.

Hero - (Section 36i)

Suggested Use: CMS hero banner.

Notes: The recommended MOBILE image size for the "Section 36 - Media" module is 640x500, while the recommended image size for LARGER SCREENS is 1440x514 If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

User can replace the background image in is handled in the relevant page's settings and update the fields there.

Set up:

The banner text/logic & imagery is handled in the relevant page's settings and update the fields there - [Dekstop Banner, Mobile Banner, Headline & Short Description field]. AND NOT VIA SECTION GUIDE.

All banner variations are controlled via page layout selected (listed below):

  • v1 - Content Page - CMS
  • v1 - Strategie en Beleid Page
  • v1 - Klantcontact Page
  • v1 - ICT en data Page
  • v1 - Juridisch Page
  • v1 - Financieel Page
  • v1 - Staf Page

By default when a user creates a page based of v1 - Content Page - CMS page layout the banner will posses the blue colour styling.

Per page creation a User has the ability to select the layout of choice as he wishes in order to have the correct banner variation needed.

ALL existing templates have already been assigned the appropriate layout.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet.

Onderaan de streep mensenwerk.

Hero - (Section 36j)

Suggested Use: CMS hero banner.

Notes: The recommended MOBILE image size for the "Section 36 - Media" module is 640x500, while the recommended image size for LARGER SCREENS is 1440x514 If an image asset does not match the recommended aspect ratio, it will appear as "cropped" to fit the expected dimensions. To avoid this, and to ensure optimal image quality and performance, make sure the image asset matches the recommended size before using it.

User can replace the background image in is handled in the relevant page's settings and update the fields there.

Set up:

The banner text/logic & imagery is handled in the relevant page's settings and update the fields there - [Dekstop Banner, Mobile Banner, Headline & Short Description field]. AND NOT VIA SECTION GUIDE.

All banner variations are controlled via page layout selected (listed below):

  • v1 - Content Page - CMS
  • v1 - Strategie en Beleid Page
  • v1 - Klantcontact Page
  • v1 - ICT en data Page
  • v1 - Juridisch Page
  • v1 - Financieel Page
  • v1 - Staf Page

By default when a user creates a page based of v1 - Content Page - CMS page layout the banner will posses the blue colour styling.

Per page creation a User has the ability to select the layout of choice as he wishes in order to have the correct banner variation needed.

ALL existing templates have already been assigned the appropriate layout.

Available Code Snippets: N/A

Lorem ipsum dolor sit amet.

Onderaan de streep mensenwerk.

Multi Item - (Section 28)

Suggested Use:A group of tiles with image, title, and description

Notes:

User can replace the Content in "Section 28 - Copy [Number]" module. The maximum amount of tiles is 4 for this section.

To reduce the number of tiles, remove the undesired "Section 28 - Media [number]" / "Section 28 - Copy [number]" module(s) from your section.

Available Code Snippets: N/A

  • v1 - Section 28 - Copy: Use to "reset" any "Section 28 - Copy" module.

Copy - (Section 31a)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 31 - Copy: Use as a "reset" for any "Section 31 - Copy" module.

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.

Copy - (Section 31b)

Suggested Use: See Section 31a.

Notes: N/A

Available Code Snippets:

  • See Section 31a.

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.

Copy - (Section 31c)

Suggested Use: See Section 31a.

Notes: N/A

Available Code Snippets:

  • See Section 31a.

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.

Copy - (Section 31d)

Suggested Use: See Section 31a.

Notes: N/A

Available Code Snippets:

  • See Section 31a.

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.

Copy - (Section 31e)

Suggested Use: See Section 31a.

Notes: N/A

Available Code Snippets:

  • See Section 31a.

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.

Copy - (Section 31f)

Suggested Use: See Section 31a.

Notes: N/A

Available Code Snippets:

  • See Section 31a.

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.

Copy - (Section 31g)

Suggested Use: See Section 31a.

Notes: N/A

Available Code Snippets:

  • See Section 31a.

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.

Copy - (Section 33a)

Suggested Use: General copy, shorter copy, etc.

Notes: N/A

Available Code Snippets:

  • v1 - Section 33 - Copy: Use as a "reset" for any "Section 33 - Copy" module.

Title

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.

Copy - (Section 33b)

Suggested Use: See Section 33a.

Notes: N/A

Available Code Snippets:

  • See Section 33a.

Title

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.

Copy - (Section 33c)

Suggested Use: See Section 33a.

Notes: N/A

Available Code Snippets:

  • See Section 33a.

Title

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.

Copy - (Section 33d)

Suggested Use: See Section 33a.

Notes: N/A

Available Code Snippets:

  • See Section 33a.

Title

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.

Copy - (Section 33e)

Suggested Use: See Section 33a.

Notes: N/A

Available Code Snippets:

  • See Section 33a.

Title

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.

Copy - (Section 33f)

Suggested Use: See Section 33a.

Notes: N/A

Available Code Snippets:

  • See Section 33a.

Title

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.

Copy - (Section 33g)

Suggested Use: See Section 33a.

Notes: N/A

Available Code Snippets:

  • See Section 33a.

Title

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.

Copy - (Section 38a)

Suggested Use: The "Section 38a - Copy" module includes an H2 heading and Paragraph + underordered lists by default. This is used for BRAND pages specific

Available Code Snippets Per BRAND:

BRAND: DEFAULT CAK

  • v1 - Custom List Style - Tick Used for Brand : "DEFAULT CAK".
  • v1 - Custom List Style - Plus Used for Brand : "DEFAULT CAK".
  • v1 - Inner Box - CAK Used for Brand : "DEFAULT CAK".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets [RESET]:

  • v1 - Section 38a - Copy: Use as a "reset" for any "Section 38a - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.

Copy - (Section 38b)

Suggested Use: The "Section 38b - Copy" module includes an H2 heading and Paragraph + underordered lists by default. This is used for BRAND pages specific

Available Code Snippets Per BRAND:

BRAND: Klantcontact

  • v1 - Custom List Style - Tick - Green Used for Brand : "Klantcontact".
  • v1 - Custom List Style - Plus - Green Used for Brand : "Klantcontact".
  • v1 - Inner Box - Klantcontact Used for Brand : "Klantcontact".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets [RESET]:

  • v1 - Section 38b - Copy: Use as a "reset" for any "Section 38b - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.

Copy - (Section 38c)

Suggested Use: The "Section 38c - Copy" module includes an H2 heading and Paragraph + underordered lists by default. This is used for BRAND pages specific

Available Code Snippets Per BRAND:

BRAND: ICT en Data

  • v1 - Custom List Style - Tick - Yellow Used for Brand : "ICT en Data".
  • v1 - Custom List Style - Plus - Yellow Used for Brand : "ICT en Data".
  • v1 - Inner Box - ICT en Data Used for Brand : "ICT en Data".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets [RESET]:

  • v1 - Section 38c - Copy: Use as a "reset" for any "Section 38c - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.

Copy - (Section 38d)

Suggested Use: The "Section 38d - Copy" module includes an H2 heading and Paragraph + underordered lists by default. This is used for BRAND pages specific

Available Code Snippets Per BRAND:

BRAND: Juridisch

  • v1 - Custom List Style - Tick - Pink Used for Brand : "Juridisch".
  • v1 - Custom List Style - Plus - Pink Used for Brand : "Juridisch".
  • v1 - Inner Box - Juridisch Used for Brand : "Juridisch".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets [RESET]:

  • v1 - Section 38d - Copy: Use as a "reset" for any "Section 38d - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.

Copy - (Section 38e)

Suggested Use: The "Section 38e - Copy" module includes an H2 heading and Paragraph + underordered lists by default. This is used for BRAND pages specific

Available Code Snippets Per BRAND:

BRAND: Financieel

  • v1 - Custom List Style - Tick - Royal Blue Used for Brand : "Financieel".
  • v1 - Custom List Style - Plus - Royal Blue Used for Brand : "Financieel".
  • v1 - Inner Box - Used for Brand : "Financieel".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets [RESET]:

  • v1 - Section 38e - Copy: Use as a "reset" for any "Section 38e - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.

Copy - (Section 38f)

Suggested Use: The "Section 38f - Copy" module includes an H2 heading and Paragraph + underordered lists by default. This is used for BRAND pages specific

Available Code Snippets Per BRAND:

BRAND: Strategie en Beleid

  • v1 - Custom List Style - Tick - Blue Used for Brand : "Strategie en Beleid".
  • v1 - Custom List Style - Plus - Blue Used for Brand : "Strategie en Beleid".
  • v1 - Inner Box - "Strategie en Beleid Used for Brand : "Strategie en Beleid".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets [RESET]:

  • v1 - Section 38f - Copy: Use as a "reset" for any "Section 38f - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.

Copy - (Section 38g)

Suggested Use: The "Section 38g - Copy" module includes an H2 heading and Paragraph + underordered lists by default. This is used for BRAND pages specific

Available Code Snippets Per BRAND:

BRAND: Staf

  • v1 - Custom List Style - Tick - Purple Used for Brand : "Staf".
  • v1 - Custom List Style - Plus - Purple Used for Brand : "Staf".
  • v1 - Inner Box - Staf Used for Brand : "Staf".

Notes: ALL variants of underordered lists by default appear when generating MODULE. Remove or ADD appropriate snippets per brand. ALL listed above.

Available Code Snippets [RESET]:

  • v1 - Section 38g - Copy: Use as a "reset" for any "Section 38g - Copy" module.

Title

Nullam id vestibulum lectus. Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae. Fusce est ligula, tincidunt eget cursus vel, faucibus eget sem. Donec a mattis lectus.

  • Item 1
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 2
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Item 3
    Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.
  • Curabitur commodo posuere sapien, non vulputate lorem dapibus vitae.

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.