CMS GUIDE
Table of Contents
Style Management
[INCLUDE STYLING OPTIONS MADE AVAILABLE VIA STYLE MANAGEMENT HERE]
Page Content Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.
Heading 2
Quisque ac posuere diam. Maecenas tincidunt quis enim et euismod. Fusce eget finibus sem. Duis iaculis nisi eu neque porta sagittis. Cras in feugiat magna, ac varius diam. In et scelerisque mauris.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.
Heading 4
Sed id semper eros. Ut non elit vel ex tristique tincidunt. Ut porta velit velit, non blandit mi auctor gravida. Aenean aliquam ligula quam, non pharetra ante tincidunt sit amet. Donec consequat malesuada mauris, non condimentum arcu porta non. Sed facilisis tortor eros, a fringilla dui commodo a. Pellentesque pharetra, quam gravida pretium blandit, eros magna tincidunt enim, a porta quam nulla quis diam.
This line starts with a break
This line also starts with a break
Here's a blockquote.
Etiam et bibendum lacus, et tempus lacus. Suspendisse rutrum orci ut feugiat porta. Duis sagittis mattis aliquet.
Bold: Nulla non lectus vel felis consectetur sagittis. Strong: Donec gravida sagittis iaculis.
Emphasis: Nulla ex neque, feugiat vel bibendum in, fringilla eget eros. Italics: In efficitur porta tellus, id pretium nisi.
- Ordered list 1
- Ordered list 2
- Ordered list 3
- Unordered list 1
- Unordered list 2
- Unordered list 3
Link: This is how linking text should appear.
Code Snippets
These can be inserted into the WYSIWYG editor by clicking the "Insert Code Snippet" button in the toolbar.
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.)
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.
Section 2 - Intro copy
Suggested Use: To be used as first section in a content page
Notes: This is a normal copy section but the copy will appear slightly bigger and with more space around it.
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.
Section 3 - Image and overlay copy on blue
Available Code Snippets:
- Section 3 - Copy reset: Use to restore the HTML module to default
DNB is een onafhankelijke centrale bank, toezichthouder en resolutie-autoriteit. Vanuit onze maatschappelijke rol maken we ons sterk voor financiële stabiliteit en duurzame welvaart in Nederland.
Section 4 - Copy
Suggested use: Content pages with structured text.
Guidelines:
- Use one main heading (H2) per section.
- Use H3 for sub-topics within the same section.
- Create a new section for each main topic instead of stacking H2s.
Notes: Remove unnecessary copy styles from the WYSIWYG.
Available code snippets: Section 4 - Copy Reset
Lorem ipsum dolor
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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 4a - Copy
Suggested use: Content pages with emphasised section headings.
Guidelines:
- Use one main heading (H2) per section.
- This section adds visual emphasis to the H2.
- Do not use multiple H2s to control spacing.
- Create a new section for each main topic.
Notes: Remove unnecessary copy styles from the WYSIWYG.
Available code snippets: Section 4a - Copy Reset
Lorem ipsum dolor
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.
- Lorem ipsum dolor sit amet test tes test
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Persistente Cross-Site Scripting (XSS).
Section 4b - Copy
Identical to 4a. (Created after the need of having multiple identical section templates on the same page)
Lorem ipsum dolor
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.
- Lorem ipsum dolor sit amet test tes test
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Persistente Cross-Site Scripting (XSS).
Section 4c - Copy for podcasts
Comes pre-populated with elements used in the Podcasts page
Available code snippets: Podcast link button; Section 4 - Transcript timestamp
Lorem ipsum dolor
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.
Or would you rather read?
[00:00:01] Speaker 1 test
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.
Social Icons - (Section 5)
Suggested Use: Social Icons. Links can be changed.
Section 9 - Testimonial CTA Banner
Suggested Use: Short Call to Action with link
Notes: Remember to add the alternative text to the media module
Available Code Snippets:
- Section 9 - Copy reset: To reset the HTML module to default
Verhalen van de werkvloer
Section 9a - Testimonial CTA Banner
Suggested Use: Quote Media with a Button
Notes: Remember to add the alternative text to the media module
Available Code Snippets:
- Section 9a - Copy reset: To reset the HTML module to default
‘Ik test of banken bestand zijn tegen cyber-criminaliteit.’
Huyen’s verhaal
Quote - (Section 11)
Suggested Use: Content Pages
Lorem ipsum dolor sit
amet, consectetur adipiscing
Media - (Section 13)
Suggested Use: Content Pages
Notes:
- Remember to add the alternative text to the media module
- The Media can be used as an Image and Video too.
Quote Hero - (Section 14)
Suggested Use: Hero Section - Content Pages
Notes:
- Remember to add the alternative text to the media module
- Image or Video can be added in the Media
Available Code Snippets:
- Section 14 - Copy Reset: Use this snippet for reuse or resetting
Hero with Back arrow - (Section 17)
Suggested Use: Hero Section - Content Pages
Notes:
- Remember to add the alternative text to the media module
- Image or Video can be added in the Media
Available Code Snippets:
- Section 17 - Copy Reset: Use this snippet for reuse or resetting
Video Hero - (Section 18)
Suggested Use: Hero Section - Content Pages
Notes:
- Remember to add the alternative text to the media module
- Image or Video can be added in the Media
Available Code Snippets:
- Section 18 - Copy Reset: Use this snippet for reuse or resetting
Video Hero - (Section 18a)
Suggested Use: Hero Section - Content Pages
Notes:
- Remember to add the alternative text to the media module
- Image or Video can be added in the Media
Available Code Snippets:
- Section 18 - Copy Reset: Use this snippet for reuse or resetting
Video Hero - (Section 18b)
Suggested Use: Hero Section - Content Pages
Notes:
- Remember to add the alternative text to the media module
- Image or Video can be added in the Media
Available Code Snippets:
- Section 18 - Copy Reset: Use this snippet for reuse or resetting
Video Hero - (Section 18c)
Suggested Use: Hero Section - Content Pages
Notes:
- Remember to add the alternative text to the media module
- Image or Video can be added in the Media
Available Code Snippets:
- Section 18 - Copy Reset: Use this snippet for reuse or resetting
Section 19 - Podcasts manual pick
Suggested Use: This allows the user to manually pick which content pages to display
Available Code Snippets:
- Section 19 - Copy reset: To reset the HTML module to default
DNB Talks
In deze podcast-serie bespreken we actuele financieel-economische vraagstukken met verschillende specialisten van DNB. Er komen geregeld nieuwe afleveringen bij.
Section 19b - Podcasts manual pick - border top
Identical to Section 19, but this one has a border top and a different intro. This one is used on the Podcasts page template
DNB Talks
Section 20 - Accordion
DIT doen we allemaal
Door data-gedreven inzichten te combineren met innovatieve IT-oplossingen werkt DNB continu aan een toekomstbestendige en veilige financiële sector.
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.
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.
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.
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.
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.
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.
List Of Links - (Section 24)
Suggested Use: Content pages and pages with List links
Notes:
- Remember to add the alternative text to the Image
- Add the URL within the URL field in the module
Video Popup - (Section 25)
Suggested Use: Content Pages
Notes:
- Must contain a video URL in the URL field
- The video you enter will be opened in a popup
- If you enter an image in the "Thumbnail Image" that image will show (800x420 preferably). If left empty, the video itself will be used as a preview
Section 25a - 2 Video - decorative and Popup
Suggested Use: Content Pages
Notes:
- Use the Media module for the preview/decorative video.
- Use an uploaded MP4 for the preview video where possible.
- The preview video is decorative only: muted, looping, plays inline, no visible controls, and should not contain essential information.
- YouTube is not recommended for the decorative preview because the iframe can still show YouTube UI such as controls, title/branding, captions/settings, related prompts, or overlays.
- If a YouTube video is used for the decorative preview, controls cannot be reliably removed. Use MP4 when a clean no-controls presentation is required.
- Use the Callout Action Link module URL for the popup video.
- The popup/playable video should keep controls so users can pause/play, adjust volume, use captions, replay, and operate it by keyboard.
- Use the Callout Action Link text for the card title.
Section 26 - Stories Related Content
Suggested Use: [suggested use case(s)]
Notes: [section notes/instructions]
Available Code Snippets:
- [code snippet name]: [code snippet notes/instructions]
View more DNB stories
Section 26a - Stories Related Content - border top
Identical to section 26. This has a border top.
View more DNB stories
Section 27 - Related Events
Notes: This module is set to display only 1 event at a time.
How do I pick which event to display on my content page? This section is global, so you will use this section on every content page you need this on. On your content page's settings find "Tagging: Job Data" and tag it to the relevant category (eg: sales). Then on the Event page you do two things: 1 - You apply the same Job Data tagging; and 2 - Under "Channels" the option Events Hub should be ticked.
Een kijkje nemen bij DNB en onze collega’s ontmoeten?
Section 29 - Centered Copy With Divider
Suggested Use: For Centered copy with divider
Available Code Snippets:
- Section 29 - Copy Reset: Include this code snippet which contains divider to reset
Aanmelden voor het DNB Traineeship kan vanaf 1 april 2027
Het traineeship start op 1 september 2027. Meld je aan voor de
DNB Job alert hieronder, zodat je tijdig een bericht krijgt.
Section 30 - Vertical Divider with Copy
Suggested Use: For Centered copy with divider
Available Code Snippets:
- Section 30 - Copy Reset: Include this code snippet which contains vertical divider to reset
Goed om te weten
Section 31 - Recruiters list
Suggested Use: Content pages - List with recruiters
Notes: Only image to be added in the media, remember to add the alternative text.
Available Code Snippets:
- Section 31 - Copy Reset: Use this for the recruiter card copy reset
Questions about this event?
Annelotte Holtackers
Recruiter
a.holtackers@dnb.nl
+31 6 524 963 92
Annelotte Holtackers
Recruiter
a.holtackers@dnb.nl
+31 6 524 963 92
Annelotte Holtackers
Recruiter
a.holtackers@dnb.nl
+31 6 524 963 92
Section 32 - Two Elements Grid
Suggested Use: Content pages - Two Elements Grid
Notes: Remember to add alternative text to images
Available Code Snippets:
- Section 32 - Title Copy Reset: Use this snippet only for the title
Lorem Ipsum Dolor
Wat is het verschil tussen een meewerkstage en een onderzoeks-/afstudeerstage? Dat gan we je uitleggen.
Meewerkstage
Bij een meewerkstage krijg je een volwaardige rol bij een afdeling die past bij je studie en interesses. Je richt je op een groot project of onderwerp en leert veel verschillende aspecten kennen van het werk dat binnen de afdeling wordt gedaan. Natuurlijk onder begeleiding van een stagebegeleider.
Onderzoeks-/ afstudeerstage
Je voert een specifiek onderzoek uit. Dat kies je met je scriptiebegeleider vanuit je universiteit en een stagebegeleider bij DNB. Tijdens je stage besteed je veel tijd aan je onderzoek en afstudeerscriptie, maar ervaar je ook hoe het is om te werken bij DNB.
Section 33 - Video Call to action Banner
Suggested Use: Content pages - Video with Call to action
Available Code Snippets:
- Section 33 - Copy Reset: Use to reset the Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Link textSection 33a - Video Call to action Banner
Suggested Use: Content pages - Video with Call to action
Available Code Snippets:
- Section 33 - Copy Reset: Use to reset the Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Link textSection 33b - Video Call to action Banner
Suggested Use: Content pages - Video with Call to action
Available Code Snippets:
- Section 33 - Copy Reset: Use to reset the Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Link textSection 33c - Video Call to action Banner
Suggested Use: Content pages - Video with Call to action
Available Code Snippets:
- Section 33 - Copy Reset: Use to reset the Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Link textSection 35 - Blue box overflowing media
Suggested Use: With pages requiring the floater.
Available Code Snippets:
- Section 35 - Copy Reset: Use to Reset the floater copy
Events Form - (Section 36)
Suggested Use: This form is meant to be used on Event pages. It is connected to a separate back-end system. Coordinate with Radancy if fields don't appear for certain events.
Sign up
Interested in participating in this event? Please fill out the registration form to confirm your attendance. This allows us to properly prepare for your participation and provide you with all practical information.
Section 39 - Events Hero
Suggested Use: Hero section
Notes: Remember to add alt text for image
Available Code Snippets:
- Section 39 - Copy Reset: Use this snippet to reset the copy
Scroll down