Accordeon

The accordeon can be used to give extra information about a subject. It takes up the whole width of a column with a maximum of 960px. The first subject is always open until closed by the user.

If you are adding a F.A.Q. please use the FAQ block for it provides the option to add an ID (hashtag) where you can link to. This is useful for guiding visitors directly to the right section on a page if necessary.

Accordeon Mobile View

Alert Notification

An Alert Notification is used to warn visitors about something, they can remove the message from the page by clicking the cross. Once it is clicked away it will not be visible again for 24 hours, unless the user removes cookies from their browser.
You can set a date from when the message will be no longer visible on the page. This can be useful for warning about website maintanance or if a (sponsor) campaign is about to expire.
 

• One or more CTA's can be added if necessary
• Headings are optional and should be placed in the text editor
• Text will be centered at all times
• The alert will be 100% width of the column it is in

Alert Mobile View

Card Plus

A block with many options, mainly used to highlight related articles or display features.

Due to the many options in the card Plus Block, it is hard to keep track of all data in it block when editing, use the collapse all button to keep track of all cards.
When you have made one card use the three dots at the right top of the card to duplicate the card and keep all settings of the card the same.

• There is an option to add a link at the bottom of the cards to direct visitors to a landing page.
• Images will not be cropped to a pre-defined aspect ratio, but displayed as uploaded.
• Horizontal view has a minimum of 3 columns and a maximum of 4 columns until the row breaks to the next line.

Image Sizes

The Card Images have the possibility for a image size setting. If the image is displayed too small, it will be blurry. If the image is too big, it will take longer to load and will cost the user more MB's from a possible databundle. The images are not cropped to a aspect-ratio but are displayed as uploaded with a maximum width. 

Bug sept 2024: Image Width setting per image is broken, the with setting of the first card is used for all card images on the page. Even if they are in another block.

Card Plus Mobile View

Note the vertical mode does not have padding on mobile (bug sept. 2024)

Cards

Cards always have a biscuit background and is available in a variation of lay-outs. Note that the images are cropped to landscape format in vertical and horizontal view. And cropped to a square on 40/60 and 25/75 view.

Image Sizes

Images will be shown in a fixed aspect ratio and uploaded images will be cropped to fit. Upload images in the right size to maintain contol on how it looks.

Cards Mobile View

Carousel

Show a carousel with multiple slides. 
Use this element with care and do not add too much text in the slide because it will push the carousel navigation below the fold of the screen on mobile and people will not notice this is a carousel. 

To use this element at it's best, try to:

• Keep all images the same size.
• Keep all text the same lenght.
• Keep text as short as possible.

Image Sizes

Images will be shown at 50% of the available width, with a max width of 480px in a default section and 960px in a full width section. 

Carousel Mobile View

CTA

Call to Action or button.
Stands out on a page, is easy recognisable as something you can click on. 

Try to use a CTA that reveals what is going to happen after the click, like continue reading, sign up, donate now, volunteer, join us.

Lots of styling options are possible, for consistency use default CTA's: Primary, Secondary or Tertiary and only use other variations when you have a good reason to do so.

Multiple CTA's can be used in one CTA block, align them left, right or centered. 

CTA Mobile View

Dynamic Listing

Automatically display 9 post cards filtered by Country, Category AND/OR Topic. 

Pick specific posts to show at the top of the list by using the featured content option.

Dynamic Listing Mobile View

FAQ List

Make sections and lists of Frequently Asked Questions, achors will be added to be able to link to a direct question. (www.url.com/page#link-to-question)
The block will automatically adds a table of content per section.

Note that the to top link only works well when the FAQ is placed at the top of a page. 

FAQ mobile view

Hero Banner

Display a large hero image with text and/or a CTA on top of it. This is usually displayed at the very top of a page.

Hero with Multiple Banners

You can add multiple banners to a default (full width) hero banner.

Currently, sept 2024, the use of a carousel and a hero banner with multple banners on one page cause a conflict.

View the multi-banner hero in action 

Image Sizes

The hero banner displays cropped versions of uploaded images, and scale down to the max width of the browser.

If you do not provide a mobile image, a cropped version of the desktop image will be displayed, the size is 375px x 210px.
You can control the lay-out by cropping images to these sizes before uploading the images.

Hero Banner Mobile View