CMS Guide Info
Suggested Use: Overview of the applied styleguide and global information about the use of sections, snippets, tips & tricks and more
Table of Contents
- Style Management
- CMS Page Templates
- Working With Custom HTML Modules' Content Editors (WYSIWYG)
- General Tips/Advice for CMS Users
- Additional Notes
- Section Guide
Style Management
- Orange
- Blue
- Spray
- Pink
- Nordic
- Charcoal
- Grey
- Yellow
- Light yellow
- Gotham
- Gotham Book
- Metropolis
- Text Black
- Text Blue
- Text Pink
- Text Orange
- Text White
-
Text Header1
-
Text Header2
-
Text Header3
-
Text Header4
- Bold
- Blue
- Orange
- Grey
- Pink
- Spray
- Nordic
Font Size
Copy area font size 1rem;
**This is the standard font size applied by default to most text that is not a heading or link.
CMS Page Templates
What CMS page templates are available to create new pages with?
The following CMS page templates are available in the "Primary CMS Theme" theme:
- CMS Template 1 - Suggested Use: creating general pages
- CMS Template 2 - Suggested Use: creating different version of general pages
In which theme should I create my page? / Which theme should my page be assigned to?
In order to use one of the CMS page templates, you must create your page inside the theme where the desired CMS page template resides. You may later assign the page to another theme if needed.
See General Tips/Advice for CMS Users 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 Tips/Advice for CMS Users.
Working With Custom HTML Modules' Content Editors (WYSIWYG)
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 syle 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 link text?" in General Tips/Advice for CMS Users.
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 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 Tips/Advice for CMS Users.
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 primarily (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. For example, if you accidentally delete the headline and byline at the top of the Custom HTML Module included in Section 1, you can use a code snippet to add it back in. In most 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.)
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 number 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 back 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, such as the headline in a "Section 1 - Copy" module.
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 Tips/Advice for CMS Users
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 on.) 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 increase/decrease the [vertical] spacing between sections?
In some cases, yes. To see if a section allows this modification, check its layout assignment. If (and only if) there is another layout with the same exact name but with a suffix of "-- large vertical margins" or "-- small vertical margins" you may switch the layout assignment to one of those layouts instead. For example, if your section has a layout assignment of "CMS Section -- Full Width" you may change the layout assignment to "CMS Section -- Full Width -- large vertical margins" for more vertical spacing or "CMS Section -- Full Width -- small vertical margins" for less vertical spacing.
Note that this should only be done when necessary - for instance, when you have sections that are closely related to each other in terms of appearance and/or content, and thus require less space between them. Note also that changing a layout assignment per the directions above will not affect spacing on mobile size screens.
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 "CMS Template 0 -- Blank" page template.
How do I know whether to use a section variant with a colored background or not?
The first section on the page - or the first section on the page after the hero banner, if one is present - should not have a colored background. Following this section, you may choose to use section variants with colored backgrounds to visually separate content - but keep in mind that this effect works best when used sparingly. For the best visual appearance and consistency across the site, no more than a third of a page's content should have a colored background.
Can I apply a color/gradient background to my page?
If your page is assigned to the "CMS - Content Page" Layout, you may assign it to the "CMS - Content Page -- with BG" layout instead, to apply a light gradient background to the page. At this time, it is the only background available for CMS pages.
Which theme should my page be assigned to?
This depends on the page's [intended] content. Currently there is only one - 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 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.
Additional Notes
How can I add to or update the notes to this section?
Find this section (title: "CMS Guide Info") in your section list and edit its "CMS Guide Info - Copy" module to add as many notes as you'd like right here. Be careful to not delete any of the content above or below your notes!
Add your notes below:
Section Guide
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.
Core Page Banner
Suggested Use:Content Page banner
Notes:
Heading Structure: Use <h1> for the main heading. To highlight part of the text, wrap that portion in a <span> element and apply the highlight class.
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Image Left and Content Right - Bg Orange
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Image Right and Content Left - Bg Orange
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Image Left and Content Right - Bg White
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Image Right and Content Left - Bg White
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Image Left and Content Right - Bg Blue
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Image Right and Content Left - Bg Blue
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Image Left and Content Right - Bg Grey
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Image Right and Content Left - Bg Grey
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Employee Stories Slider
Suggested Use: This section is ideal for showcasing testimonials, employee quotes, or client feedback.
Notes:The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Accessibility:Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Slider Carousel - 4 Tiles
Suggested Use: This section is ideal for showcasing testimonials, employee quotes, or client feedback.
Notes:The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Accessibility:Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Content Left - Image Right 50-50 - Bg Blue
Suggested Use:Content and Media
Notes:
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Content Right - Image Left 50-50 - Bg Blue
Suggested Use:Content and Media
Notes:
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Note to Developer: Please include documentation for this section!
Note to Developer: Please include documentation for this section!
Title - Paragraph - CTA - Aligned Center
Suggested Use: shorter copy with optional CTA(s)
Notes: This layout is best suited for concise content.
Customization: You can use the WYSIWYG editor and style management tools to customize the text and buttons.
Single column text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius.
Title - Paragraph - CTA - Aligned Right
Suggested Use: shorter copy with optional CTA(s)
Notes: This layout is best suited for concise content.
Customization: You can use the WYSIWYG editor and style management tools to customize the text and buttons.
Single column text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius.
Title - Paragraph - CTA - Aligned Left
Suggested Use: shorter copy with optional CTA(s)
Notes: This layout is best suited for concise content.
Customization: You can use the WYSIWYG editor and style management tools to customize the text and buttons.
Single column text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius.
Featured Quote - Bg Charcoal
Suggested Use: This section allows you to display a quote with optional attribution.
Notes:
You can add the quote content and attribution within the CMS editor.
Small headline
Extra large headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta. Maecenas velit ipsum, tristique pharetra pharetra at, iaculis consectetur nulla.
Call to Action Section 50-50 - Bg White
Suggested Use: Highlighting key messages. Large headline on the left and supporting text with CTA on the right
Small headline
Extra large headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta. Maecenas velit ipsum, tristique pharetra pharetra at, iaculis consectetur nulla.
Call to Action Section 50-50 - Bg Charcoal
Suggested Use: Highlighting key messages. Large headline on the left and supporting text with CTA on the right
Small headline
Extra large headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta. Maecenas velit ipsum, tristique pharetra pharetra at, iaculis consectetur nulla.
Video Player - Full Width
Suggested Use: Section with embedded full-width video (e.g., YouTube)
Accessibility: Ensure YouTube video captions are enabled or provide a transcript for users with hearing impairments. For more accessibility information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Image Banner - Full Width
Suggested Use: Full-width image banner
Notes:
Ensure the image maintains a proper aspect ratio to prevent distortion. The image should be high-resolution, but optimized for fast loading across different devices, including desktop and mobile.
Accessibility: Provide descriptive alt text for the image to ensure accessibility for screen readers. For more information on accessibility requirements, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Headline with Bullet List and CTA - Bg White
Suggested Use: Text Content
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Single column text
- Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
- Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
- Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
- Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
- Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
- Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Job List and Content 2 Col
Suggested Use: This section is designed to showcase a list of jobs on the left with heading, description and CTA on the right.
NotesHeading Structure: For text sections, use H2 tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use H3 or H4 as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Single column text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius.
Related Jobs
Suggested Use: list of job links related to the page this section is placed on
Notes: Jobs that match a page's job data mappings are considered to be "related." If this section is placed on a page where no job data mappings exist, it will show the latest jobs instead.
Job List 2 Col
Suggested Use: list of job links
Notes: module uses filters associated to the content page - If your content page does not have filters applied to it this module will show recent jobs.
Content Right - Image Left 50-50 - Bg White
Suggested Use:Content and Media
Notes:
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Content Left - Image Right 50-50 - Bg White
Suggested Use:Content and Media
Notes:
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Content Right - Image Left 50-50 - Bg Orange
Suggested Use:Content and Media
Notes:
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Content Left - Image Right 50-50 - Bg Orange
Suggested Use:Content and Media
Notes:
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Featured Content - About Us - Bg Blue
Suggested Use:About Us
关于我们
Key facts and figures Section
Suggested Use:N/A
我们的员工数据
我们的全球足迹：
6000+
6,000+ 名团队成员
40
遍布24 个司法管辖区的 40 间办公室
52
使用52 种语言沟通
114
114 个国籍的员工
2025 年，我们共同成就：
23
人均培训 23 小时
100+
100 +次内部转岗机会
500+
500 +次晋升机会
About Us Timeline Slider Section
Suggested Use:N/A
我们的历史与未来
Alter Domus SVG Map Section
Suggested Use: N/A
Notes:N/A.
Alter Domus 在
世界哪些地方？
cms guide - Image left and Content Right - Bg Pink
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
CMS guide - Image Right and Content Left - Bg Pink
Suggested Use: Text Content and Media
Notes:
Heading Structure: For text sections, use <h2> tags for primary headings. This helps maintain a clear and accessible document structure. For subheadings, use <h3> or <h4> as appropriate.
Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.
Image Size and Quality: Ensure images are optimized for web use.
Alt Text: Always provide descriptive alt text for images to improve accessibility and SEO. For decorative images, use an empty alt attribute (i.e., alt="") to ensure they are ignored by screen readers.
Testimonial carousel - Bg White
Suggested Use: Display testimonials
Testimonials
As a junior, I learn a lot from all colleagues around me. In addition, the AD Academy keeps on providing us with all the training we need.
Shania Galea Corporate Services Officer, Malta
Think ahead to five years’ time and where you would like to see yourself. That’s what I did and Alter Domus offered me the right path.
Amanda Donohue Senior Manager, Cork
Many might think that the financial services industry is primarily numbers and math, but I believe we are a people business. The people at Alter Domus make it what it is, and we have some of the best in the entire industry.
Aristidis Halikias Managing Director, Chicago
Alter Domus were fully supportive through my studying path, providing study support in the way of study fees and study leave, as well as some flexible working towards nearer each exam to help me manage with work/life (and exam!) balance.
Carla Walmsley Senior Manager, Jersey
Testimonial carousel - Bg Orange
Suggested Use: Display testimonials
Testimonials
As a junior, I learn a lot from all colleagues around me. In addition, the AD Academy keeps on providing us with all the training we need.
Shania Galea Corporate Services Officer, Malta
Think ahead to five years’ time and where you would like to see yourself. That’s what I did and Alter Domus offered me the right path.
Amanda Donohue Senior Manager, Cork
Many might think that the financial services industry is primarily numbers and math, but I believe we are a people business. The people at Alter Domus make it what it is, and we have some of the best in the entire industry.
Aristidis Halikias Managing Director, Chicago
Alter Domus were fully supportive through my studying path, providing study support in the way of study fees and study leave, as well as some flexible working towards nearer each exam to help me manage with work/life (and exam!) balance.
Carla Walmsley Senior Manager, Jersey
6 Tile Image Grid with Description and Intro
Suggested Use: This section showcases a grid of six images, each accompanied by a brief description.
Notes:
Each tile should maintain a uniform size and aspect ratio to create a clean and organized appearance. Descriptions should be concise.
Accessibility: Each image should have descriptive alt text that conveys its meaning if not purely decorative.
Single column text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius.
Full Image with Left-Aligned Text Box - Bg Orange
Suggested Use: This section displays a full-width background image with text overlaid on the left side.
Notes:
The background image should be of high resolution and uploaded via the media module. For best results, consider uploading separate images optimized for desktop and mobile views. This will allow better control over the cropping and aspect ratio of the images across different devices, ensuring the image looks its best on both large screens and smaller mobile devices.
The text block should include a heading and a paragraph or brief message
Accessibility: The background image should be either decorative (with an empty alt attribute `alt=""`) or include a meaningful description in the alt text if the image conveys content.
Full Image with Right-Aligned Text Box - Bg Spray
Suggested Use: This section displays a full-width background image with text overlaid on the Right side.
Notes:
The background image should be of high resolution and uploaded via the media module. For best results, consider uploading separate images optimized for desktop and mobile views. This will allow better control over the cropping and aspect ratio of the images across different devices, ensuring the image looks its best on both large screens and smaller mobile devices.
The text block should include a heading and a paragraph or brief message
Accessibility: The background image should be either decorative (with an empty alt attribute `alt=""`) or include a meaningful description in the alt text if the image conveys content.
Carousel - Image - Bg Nordic
Suggested Use: Showcase Slider
Carousel headliner
Carousel - Image and Role
Suggested Use: Staff Highlight Carousel
Carousel with text in images
Employee Name Role
Employee Name Role
Employee Name Role
Employee Name Role
Employee Name Role
Employee Name Role
3-Column Feature Grid
Suggested Use: This section is ideal for displaying three equally spaced columns that highlight key features. Each column consists of an image, text, and a call-to-action button.
Notes:The images used in each column should be of equal size and resolution to maintain visual consistency. Ensure that images are optimized for both desktop and mobile viewing to avoid distortion or cropping.
Accessibility: Ensure all non-decorative images include descriptive alt text to provide context for users with visual impairments. If an image is purely decorative and does not contribute to the content, use an empty alt attribute to allow screen readers to skip it. This helps maintain a smooth and accessible user experience.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc nunc, euismod nec dignissim et, eleifend vel est. Aliquam a venenatis augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc nunc, euismod nec dignissim et, eleifend vel est. Aliquam a venenatis augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc nunc, euismod nec dignissim et, eleifend vel est. Aliquam a venenatis augue.
Two col content and Media with Map as Background
Notes: This section features a large heading, supporting text, CTA buttons. The buttons/links. You can use the WYSIWYG editor and style management tools to customize both text and button styles.
Featured Quote BG charcoal
Suggested Use: This section allows you to display a quote with optional attribution.
Notes:
You can add the quote content and attribution within the CMS editor.
Small headline
Extra large headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta. Maecenas velit ipsum, tristique pharetra pharetra at, iaculis consectetur nulla.
Career Path
Suggested Use: This section visually represents a step-by-step career progression path. It typically highlights key milestones or roles, helping users understand potential growth opportunities within an organization.
Notes:
Title goes here
Trainee
Officer
Senior Officer
Manager
Senior Manager
Director
Application Process - Version 1
Suggested Use: This section is designed to clearly communicate the steps involved in the application process. Each step is represented by an icon and a brief description.
Notes:
Each step should consist of an icon at the top, a bolded step title, and a brief description.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Application Process - Version 2
Suggested Use: This section is ideal for clearly showcasing a detailed application or process broken into multiple steps. Each step is represented by a step number, an icon, and a brief description
Notes:
For use cases where you need to display a process with a larger number of steps. Ensure that the content of each step is concise.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Application Process - Version 3
Suggested Use: This section is ideal for clearly showcasing a detailed application or process broken into multiple steps. Each step is represented by a step number, an icon, and a brief description
Notes:
For use cases where you need to display a process with a larger number of steps. Ensure that the content of each step is concise.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta.
Note to Developer: Please include documentation for this section!
Quote headline
“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.”
Employee name, title
Note to Developer: Please include documentation for this section!
Quote headline
“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.”
Employee name, title
Call to Action Section 50-50 - Bg Grey
Suggested Use: Highlighting key messages. Large headline on the left and supporting text with CTA on the right
Small headline
Extra large headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius lorem nec posuere porta. Maecenas velit ipsum, tristique pharetra pharetra at, iaculis consectetur nulla.
Google Map
Suggested Use: This section is designed to integrate a Google Maps widget
Notes:
Ensure that you provide accurate addresses.
Map Heading
-
North America, Atlanta, GA
Atlanta, GA
Note To Developer: Please include documentation for this section!
Content Right - Image Left 50-50 - Bg Orange
Suggested Use:Content and Media
Notes:
Ensure that the image maintains a good aspect ratio and clarity across different devices.
Accessibility: If the image is not purely decorative, please provide a descriptive alt text for the banner image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.
Featured Content - About Us - Bg Blue
Suggested Use:About Us
关于我们
CMS Find Your Place Section
Suggested Use: Path Section with interactive element that appears when clicked over, containing a title, description, and a button
Title
goes here
Subtitle goes here