Skip to main content

Style Management

Background Colors

BG lavander
#4a3fde

Class:
background--veeam-lavander

BG purple
#8e71f4

Class:
background--veeam-purple

BG light purple
#e3eefe

Class:
background--veeam-light-purple

BG light grey
#eef4f6

Class:
background--veeam-light-grey

BG green
#00d15f

Class:
background--veeam-green

BG blue
#3700ff

Class:
background--veeam-blue

BG orange
#fe8a25

Class:
background--veeam-orange

BG yellow
#ffd839

Class:
background--veeam-yellow

BG cyan
#57e0ff

Class:
background--veeam-cyan

BG light mint
#e1f4ec

Class:
background--veeam-light-mint

BG black
#000000

Class:
background--black

BG white
#ffffff

Class:
background--white

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6



Body Copy

Body 1 (Default Size)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at felis in lorem lobortis ultricies. Aliquam mi nibh, venenatis sit amet gravida quis, vestibulum in velit. Curabitur mattis dapibus dapibus.

Body 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at felis in lorem lobortis ultricies. Aliquam mi nibh, venenatis sit amet gravida quis, vestibulum in velit. Curabitur mattis dapibus dapibus.

Body 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at felis in lorem lobortis ultricies. Aliquam mi nibh, venenatis sit amet gravida quis, vestibulum in velit. Curabitur mattis dapibus dapibus.



Text Color

Text Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at felis in lorem lobortis ultricies. Aliquam mi nibh, venenatis sit amet gravida quis, vestibulum in velit. Curabitur mattis dapibus dapibus.

Text Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at felis in lorem lobortis ultricies. Aliquam mi nibh, venenatis sit amet gravida quis, vestibulum in velit. Curabitur mattis dapibus dapibus.

Text White

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at felis in lorem lobortis ultricies. Aliquam mi nibh, venenatis sit amet gravida quis, vestibulum in velit. Curabitur mattis dapibus dapibus.



Links & Buttons* **

This is a simple link

Button Primary Button Secondary

*Use your mouse to hover over links in order to see their hover states.

**Before applying any of these link styles, make sure that the element you're applying the style to is ALREADY a link. See Custom HTML Modules: Content Editor (WYSIWYG) FAQs to learn how to add a link inside your content editor.



Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at felis in lorem lobortis ultricies. Aliquam mi nibh, venenatis sit amet gravida quis, vestibulum in velit. Curabitur mattis dapibus dapibus.

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?

[INCLUDE HERO BANNER INSTRUCTIONS HERE]

CMS User Notes

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

Find this section (title: "[INCLUDE SECTION NAME HERE]") in your section list and edit its "[INCLUDE MODULE NAME HERE]" 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 3a)

Suggested Use: page introductions, general copy, blog articles

Notes: Use if wanting content centered and smaller container width.

Available Code Snippets:

  • Section 3 - Copy: Use this code snippet in a "Section 3 - Copy" Module to "reset" the module to its template content.

Heading (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mauris lobortis, blandit turpis sed, ultricies arcu. Mauris commodo accumsan pellentesque. Sed dignissim lobortis libero, eget hendrerit tortor. Proin gravida accumsan nibh, cursus malesuada lorem sollicitudin vel. Maecenas maximus gravida massa at dapibus. Integer vehicula justo metus, et feugiat augue semper quis. Mauris erat lorem, rutrum a rutrum vehicula, consectetur vitae mi. Nam id ultrices ligula, id eleifend eros. Phasellus eros odio, facilisis eget pellentesque nec, vestibulum vel libero. Quisque auctor ut ante eget dapibus. Vestibulum ac eros dui.

Copy - (Section 3b)

Suggested Use: page introductions, general copy, blog articles

Notes: Use for left aligned content.

Available Code Snippets: See section 3a

Heading (h2) Test

Test Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mauris lobortis, blandit turpis sed, ultricies arcu. Mauris commodo accumsan pellentesque. Sed dignissim lobortis libero, eget hendrerit tortor. Proin gravida accumsan nibh, cursus malesuada lorem sollicitudin vel. Maecenas maximus gravida massa at dapibus. Integer vehicula justo metus, et feugiat augue semper quis. Mauris erat lorem, rutrum a rutrum vehicula, consectetur vitae mi. Nam id ultrices ligula, id eleifend eros. Phasellus eros odio, facilisis eget pellentesque nec, vestibulum vel libero. Quisque auctor ut ante eget dapibus. Vestibulum ac eros dui.

Copy - (Section 4a)

Suggested Use: page introductions, general copy, blog articles

Notes: N/A

Available Code Snippets:

  • Section 4 - Headline: Use this code snippet in a "Section 4 - Headline" Module to "reset" the module to its template content.
  • Section 4 - Copy: Use this code snippet in a "Section 4 - Copy" Module to "reset" the module to its template content.

Why Veeam?

Contribute to impactful projects that influence some of the world’s largest businesses. You’ll collaborate daily with entrepreneurial thinkers, working at the forefront of data security and resilience. As a valued member of a world-class team, you’ll be encouraged to listen, learn, and grow, developing your skills at a place where you'll truly make a difference.

Media and Copy - (Section 5a)

Suggested Use: Highlight brief content and accompanied by media

Notes:

Available Code Snippets:

  • Section 5 - Copy: Use this code snippet in a "Section 5 - Copy" Module to "reset" the module to its template content.

Lorem Ipsum

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.

Job List - (Section 6a)

Suggested Use: Use to display global list of job links throughout site with personalization for location.

Notes: N/A.

Available Code Snippets: N/A.

Jobs for you 

Find your fit. Discover roles where bold ideas, real impact, and career-defining growth come together.

More jobs

Job List - (Section 6b)

Suggested Use: A list of job links, with each link featuring data such as job title, job category, date posted, etc.

Notes: The "Section 6b - Job List" module is fully customizable and can be configured to:

  • show jobs dynamically, job seeker's personalization cookie,
  • show jobs manually, based on specific job req IDs,
  • OR show jobs based on job data filters (job category, job location, and/or job facet.)

Available Code Snippets: N/A.

Jobs for you 

Find your fit. Discover roles where bold ideas, real impact, and career-defining growth come together.

More jobs

Job Alert - (Section 8a)

Suggested Use: Use to sign up for Job Alerts.

Notes: Used for global use.

Available Code Snippets: N/A.

Sign up for job alerts

Don't see what you’re looking for? Sign up and we'll notify you when roles become available.

Job Alert - (Section 8b)

Suggested Use: None.

Notes: Used for global use.

Available Code Snippets: N/A.

Sign up for job alerts

Don't see what you’re looking for? Sign up and we'll notify you when roles become available.

Job Alert - (Section 8c)

Suggested Use: See section 8a.

Notes: The recommended image size for a "Section 8 - Img [number] - CMS" module is 640x448 (640x448 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.

Available Code Snippets: N/A.

Sign up for job alerts

Don't see what you’re looking for? Sign up and we'll notify you when roles become available.

Related Content Dynamic - (Section 9a)

Suggested Use:A set of 3 "related content" links in "card" format (image, title, and description) that are dynamically selected from the "Related Content" CPM channel, based on job data present at the page level or in the job seeker's personalization cookie.

Notes:To have a content page or offsite content page be made available as a potential "related content" link, it must be tagged with the "Related Content" CPM channel in its page settings.

The thumbnail images, titles, and descriptions represent page-level data and 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.

It is expected that in some cases, less than 3 pages tagged with the "Related Content" CPM channel will be identified as "related/matching" content, based on job data present at the page level or in the job seeker's personalization cookie. In these scenarios, rather than showing less than 3 "related content" page links, the "Section 9 - Content Feed" module will use pages from its default content list (typically these are pages that would be of interest to most job seekers) to fill any spots left empty due to a lack of "related/matching" content. As this module cannot be edited in CMS Admin, please contact your Customer Support Specialist (CSS) to have this default content list updated. The default content list should include at least 3 pages if the intent is to show 3 "related content" links in all scenarios.

Available Code Snippets: N/A.

Related Content Dynamic - (Section 9b)

Suggested Use: See Section 9a.

Notes: See Section 9a. Use if wanting variant color purple.

Available Code Snippets: N/A.

Related Content Dynamic - (Section 9d)

Suggested Use: See Section 9a

Notes: See Section 9a. Use if wanting variant color orange.

Available Code Snippets:

Related Content Dynamic - (Section 9e)

Suggested Use: See Section 9a.

Notes: See Section 9a. Use if wanting variant color mint green and cta buttons.

Available Code Snippets: N/A.

Related Content Dynamic - (Section 9c)

Suggested Use: See Section 9a.

Notes: See Section 9a. This section includes 4 columns.

Available Code Snippets: N/A.

Hero - (Section 10d)

Suggested Use: Search Results Page.

Notes: The recommended image size for a "Section 10 - Image [variant]" module is 1440x387 (1440x387 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.

Available Code Snippets:

  • Section 10 - Headline: Use this code snippet in a "Section 10d - Headlines" Module to "reset" the module to its template content.

Lorem ipsum dolor sit amet.

Hero - (Section 10e)

Suggested Use: None.

Notes: This banner includes spacing when needed below. The recommended image size for a "Section 10 - Image [variant]" module is 1440x387 (1440x387 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.

Available Code Snippets:

  • Section 10 - Headline: Use this code snippet in a "Section 10e - Headlines" Module to "reset" the module to its template content.

Lorem Ipsum

Hero - (Section 10f)

Suggested Use: Search Results Page.

Notes: The recommended image size for a "Section 10 - Image [variant]" module is 1440x387 (1440x387 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.

Available Code Snippets:

  • Section 10 - Headline: Use this code snippet in a "Section 10f - Headlines" Module to "reset" the module to its template content.

Lorem ipsum dolor sit amet.

Hero - (Section 10g)

Suggested Use:

Notes: Can use as banner with no text. The recommended image size for a "Section 10 - Image [variant]" module is 1440x387 (1440x387 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.

Available Code Snippets: N/A.

Multi Item - (Section 18a)

Suggested Use: Feature highlights, service offerings, benefits list, or capabilities grouped under a common theme.

  • optional: Icon (SVG or image)
  • Heading (H3)
  • Short supporting paragraph
  • optional: link/button

Available Code Snippets:

  • Section 18 - Copy: Use this code snippet in a "Section 18 - Copy" Module to "reset" the module to its template content.

Testimonial - (Section 19a)

Suggested Use: Use this section to highlight impactful quotes or testimonials from employees, customers, or leadership.

Structure:

  • Section heading (H2)
  • Two-column layout:
    • Left: Author image
    • Right: Quote text (with large quote icon), followed by author name and role
  • If no image is provided, quote container should expand to full width

Available Code Snippets:

  • Section 19 - Headline: Use this code snippet in a "Section 19 - Quote Intro" Module to "reset" the module to its template content.
  • Section 19 - Quote: Use this code snippet in a "Section 19 - Quote" Module to "reset" the module to its template content.

Heading (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author name

Role Job desc

Multi Item - (Section 20a)

Suggested Use: Ideal for embedding YouTube, Vimeo, or internal hosted videos.

Structure:

  • Optional intro section heading (H2) + text
  • Video area includes:
    • Thumbnail image (uploaded)
    • Play button overlay (clicking opens embedded video)
  • Responsive iframe/player embeds the video
  • Content authors can:
    • Add a video link
    • Upload a custom thumbnail image
    • Add a video title

Notes: The recommended image size for a "Section 20 - Video [number]" module is 1155x1482 (1155x1482 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.

Available Code Snippets:

  • Section 20 - Copy: Use this code snippet in a "Section 20 - Copy" Module to "reset" the module to its template content.

Lorem ipsum dolor

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.

Image and Copy - (Section 21a)

Suggested Use: None.

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
Recommended minimum size is 228 × 217 px

Notes: N/A.

Available Code Snippets:
Section 21 - Heading and Copy (For Heading and the text)

  • Section 21 - Heading and Copy: Use this code snippet in a "Section 21 - Intro Copy" Module to "reset" the module to its template content.
  • Section 21 - Card Copy: Use this code snippet in a "Section 21 - Card Copy [number]" Module to "reset" the module to its template content.

Lorem Ipsum

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

My Voice Matters

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mauris lobortis, blandit turpis sed, ultricies arcu.

Author

Role

Belonging at Veeam

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mauris lobortis, blandit turpis sed, ultricies arcu.

Author

Role

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mauris lobortis, blandit turpis sed, ultricies arcu.

Author

Role

Image and Copy - (Section 22a)

Suggested Use: N/A

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
Recommended minimum size is 564 × 342 px

Text Content: Use the WYSIWYG to add and edit text content

Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.

Available Code Snippets:

  • Section 22 - Copy: Use this code snippet in a "Section 22 - Copy [R or L]" Module to "reset" the module to its template content.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mauris lobortis, blandit turpis sed, ultricies arcu. Mauris commodo accumsan pellentesque. Sed dignissim lobortis libero, eget hendrerit tortor. 

View

Image and Copy - (Section 22b)

Suggested Use: N/A

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
Recommended minimum size is 564 × 342 px

Text Content: Use the WYSIWYG to add and edit text content

Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.

Available Code Snippets: See Section 22

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mauris lobortis, blandit turpis sed, ultricies arcu. Mauris commodo accumsan pellentesque. Sed dignissim lobortis libero, eget hendrerit tortor. 

FAQ - (Section 23a)

Suggested Use:N/A

Frequently asked questions

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. Praesent ac nulla iaculis, ornare magna quis, posuere ex.

    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.

    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.

    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.

    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.

    You need a technical background in IT and strong communication skills, sometimes in more than one language, depending on your location. Experience in customer service is beneficial but not essential — the most important thing is a genuine love for helping people. A passion for technology, problem-solving, and the willingness to learn and adapt to new systems is crucial. 

Multi Item - (Section 24a)

Suggested Use: N/A

Description: This section consists of interactive cards. Each card displays an icon, title, and optional intro text. On click (or tap), the card expands to reveal additional content.

Content Options:

  • Icon (SVG or inline)
  • Card Title
  • Optional card description
  • Optional links or actions per card

Available Code Snippets:

  • Section 24 - Copy: Use this code snippet in a "Section 24 - Intro" Module to "reset" the module to its template content.

Donec a mattis lectus

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. Praesent ac nulla iaculis, ornare magna quis, posuere ex.

Multi Item - (Section 25a)

Suggested Use: N/A

Description: This section consists of static cards.

Character limit for the card heading and copy is 255 characters.

Content Options:

Image dimensions: 285 x 217 px

  • Image
  • Card Title
  • Optional card description
  • Optional links or actions per card

Available Code Snippets:

  • Section 25 - Copy: Use this code snippet in a "Section 25[variant] - Intro" Module to "reset" the module to its template content.

Nullam id vestibulum

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

  • Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Multi Item - (Section 25b)

Suggested Use: N/A

Description: This section consists of static cards. If a valid URL is added, the card becomes clickable and shows a purple arrow. If the default “/#” URL remains, the card stays static with no arrow or hover effect.

Character limit for the card heading and copy is 255 characters.

Image dimensions: 351 x 220 px

Content Options:

  • Image
  • Card Title
  • Optional card description
  • Optional links or actions per card

Available Code Snippets: See Section 25a

Nullam id vestibulum

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

Multi Item - (Section 25c)

Suggested Use: N/A

Description: This section consists of static cards

Content Options:

  • Icon (SVG or inline)
  • Card Title
  • Optional card description
  • Optional links or actions per card

Available Code Snippets: See Section 25a.

Nullam id vestibulum

  • Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  • Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Hero - (Section 26a)

Suggested Use: Hero sections, promotional banners, call-to-action intros

Notes: Ensure that separate images are provided for both desktop and mobile for optimal responsiveness.

Notes: Use if wanting orange background and image to expand to height of banner.

Notes: For Devs: Given variety of images, use below classes to adjust image depending on needs.

  • "mobile-image-offset-right"
  • "xxxl-desktop-image-offset-right"

Available Code Snippets:

  • Section 26 - Header: Use this code snippet in a "Section 26 - Header" Module to "reset" the module to its template content.
  • Section 26 - Header: Use this code snippet in a "Section 26 - Header - White" Module to change text to white.

Lorem Ipsum

Hero - (Section 26b)

Suggested Use: See Section 26a.

Notes: See Section 26a.

  • Use if wanting cyan background.
  • Image will expand to height of banner

Available Code Snippets: See Section 26a

Lorem Ipsum

Hero - (Section 26c)

Suggested Use: See Section 26a.

Notes: See Section 26a. Use if wanting green background.

Available Code Snippets: See Section 26a

Lorem Ipsum

Hero - (Section 26d)

Suggested Use: See Section 26a.

Notes: See Section 26a. Use if wanting purple background.

Available Code Snippets: See Section 26a

Lorem Ipsum

Hero - (Section 26e)

Suggested Use: See Section 26a.

Notes: See Section 26a.

  • Use if wanting blue background.
  • Image will expand to height of banner

Available Code Snippets: See Section 26a

Lorem Ipsum

Hero - (Section 26f)

Suggested Use: See Section 26a.

Notes: See Section 26a. Use if wanting yellow background.

Available Code Snippets: See Section 26a

Lorem Ipsum

Multi Item - (Section 27a)

Suggested Use: N/A

Image Size and Quality: Users can upload icon images. Please resize images to fit this module.

Available Code Snippets:

  • Section 27 - Copy: Use this code snippet in a "Section 27 - Intro" Module to "reset" the module to its template content.

Lorem Ipsum

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.

Image and Copy - (Section 28a)

Suggested Use: N/A

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
Recommended minimum size is 913 × 639 px

Text Content: Use the WYSIWYG to add and edit text content

Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.

Available Code Snippets:

  • Section 28 - Copy: Use this code snippet in a "Section 28 - Copy" Module to "reset" the module to its template content.

Lorem ipsum dolor

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