Table of Contents 

• Style Management
• Section Guide

Style Management 

Headings:

Headline 1

Headline 2

Headline 3

Headline 4

Font weight:

Font Veolia

Font Bold

Font Extra Bold

Font Light

Font Italic 

Font Arial

Color & Backgrounds

Color red

Color turquoise

Color yellow

Color abricot

Color light blue

Color orange

Color Marine

Color White

Color Black 

Background turquoise

Background red

Background yellow

Background abricot

Background marine

Background light blue

Background orange

Background white

Background Black 

Icons

Spacing

General Description

To use these margin and padding classes, you can simply add the class name to your HTML elements. The class names are structured to specify the type of spacing (margin or padding), the direction (top, bottom, left, right, x for left and right, y for top and bottom), and the size (0 to 5, where each number represents a rem value).

Additionally, you can apply spacing based on different breakpoints (like -sm -m -xl - L).

How to Use

1. Identify the Element: Decide which HTML element you want to apply the spacing to (e.g., a paragraph, div, etc.).
2. Choose the Type of Spacing:
   • Padding: Space inside the element, pushing the content away from the edges.
   • Margin: Space outside the element, pushing the element away from others.
3. Determine the Direction:
   • Top (t): Applies to the top of the element.
   • Bottom (b): Applies to the bottom of the element.
   • Left (l): Applies to the left side of the element.
   • Right (r): Applies to the right side of the element.
   • X: Applies to both left and right.
   • Y: Applies to both top and bottom.
4. Select the Size: Choose a size value from 0 to 5. Each number corresponds to a rem value (0rem, 1rem, 2rem, 3rem, 4rem, 5rem).
5. Apply Breakpoints: Use breakpoint suffixes (-sm, -md, -lg, -xl, -xxl) to apply the spacing only at certain screen sizes.

Example of Classes for margin and padding -

• .padding-y-1: Adds 1rem padding to the top and bottom of the element.

• .padding-x-2: Adds 2rem padding to the left and right of the element.

• .padding-t-3: Adds 3rem padding to the top of the element.

• .padding-b-4: Adds 4rem padding to the bottom of the element.

• .padding-r-5: Adds 5rem padding to the right of the element.

• .padding-l-1: Adds 1rem padding to the left of the element.

• .margin-y-2: Adds 2rem margin to the top and bottom of the element.

• .margin-x-3: Adds 3rem margin to the left and right of the element.

• .margin-t-4: Adds 4rem margin to the top of the element.

• .margin-b-5: Adds 5rem margin to the bottom of the element.

• .margin-r-1: Adds 1rem margin to the right of the element.

• .margin-l-2: Adds 2rem margin to the left of the element.

With breaking points:

This paragraph has 1rem padding on top and bottom on small screens. (Class: padding-y-1-sm)

This paragraph has 2rem padding on left and right on medium screens. (Class: padding-x-2-m)

This paragraph has 3rem padding on top on large screens. (Class: padding-t-3-l)

This paragraph has 4rem padding on bottom on extra-large screens. (Class: padding-b-4-xl)

This paragraph has 5rem padding on right on extra-extra-large screens. (Class: padding-r-5-xxl)

This paragraph has 1rem padding on left on extra-extra-large screens. (Class: padding-l-1-xxl)

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

• [TEMPLATE NAME] - Suggested Use: [INCLUDE INTENDED USE HERE]

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.

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.

See General Tips/Advice for CMS Users.

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.

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.

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.

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.

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.

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 quote in one of the Custom HTML Modules in a "Two Testimonials" section, you can use a code snippet to add a default quote which you can then edit as needed. 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 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 "Intro Copy" you should only be using code snippets whose titles include "Intro Copy."

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.

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.)

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 [https://radancy.dev/a11y/cms-guide/].

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.

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.

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 - Body Copy" or "DEI - Body 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.

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.

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

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.

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 [https://www.w3.org/WAI/tutorials/images/decision-tree/]. Not only are these considerations essential in making the site accessible to non-visual users, it will also improve SEO.

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.

[INCLUDE HERO BANNER INSTRUCTIONS HERE]

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 any of the content above or below your notes!

Add your notes below:

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? labeled?] based on which menu they can be found in after clicking the "add section" button on any page:

• [Color? Label?] - find this section in the "Use Existing" Menu.

• [Color? Label?] - 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 Guide