Skip to main content

Note To Developer: Please include documentation for this section!

PLEASE NOTE: Sysco does not charge a fee at any stage of the recruitment process. Any requests for the payment of fees should be refused and reported to local law enforcement for appropriate action.

CMS Guide

Table of Contents

Style Management

The following labels refer to styling options/classes in the "STYLE" dropdown menu located in the toolbar in every Custom HTML Module's content editor. Please note, when you see multiple font sizes listed for a name, that is telling you the font size at mobile/tablet and desktop.

Headings

Heading 1

Font Size 30px 78px 92px White with BG Color Black (font size typically used with a H1 element)

Font Size 30px 78px 92px Black

Heading 2

Font Size 28px 50px Blue (font size typically used with a H2 element)

Font Size 28px 50px Black

Heading 3

Font Size 24px 28px (font size typically used with a H3 element)

Heading 4

Font Size 16px 20px (font size typically used with a H4 element)

Heading 5
Font Size 14px 16px (font size typically used with a H5 element)

Font Weight

Font Weight Light
Font Weight Regular*
Font Weight Semibold
Font Weight Bold

*This is the standard font weight applied by default to most text that is not a heading or link.

Font Size (multiple font sizes in a name shows you mobile/tablet and desktop)

Font Size 14px 16px*
Font Size 16px 20px* **
Font Size 20px 25px Intro* ***
Font Size 24px 28px*
Font Size 28px 50px Blue****
Font Size 28px 50px Black****
Font Size 14px
Font Size 16px
Font Size 18px
Font Size 20px
Font Size 24px

*Mobile is first number listed, desktop is the last. If there's a middle number, it refers to tablet size.

**This is the standard font size applied by default to most text that is not a heading or link.

***This is typically used as the font size for page intro's.

****This is usually used for a section heading.

Colors & Backgrounds

Color Text
Color Black
Color Blue
Color White (with BG Color Black)

  BG Color Black (with Color White)  
  BG Color Green (with Color Black)  
  BG Color Dark Gray (with Color White)  
  BG Color Blue (with Color Black)  

 BG Color Blue-Green Gradient (with Color White)  

Links*

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

Inline Link
Inline Link - Underline
Arrow Link
Arrow Link - White

*Use your mouse to hover over links in order to see their hover states. You may also see a light blue background in the WYSIWYG Editor whenever you add a link. That background will not translate over to the website. It's only for the purpose of the editor and helps whenever there is white text.

Button Links*

IMPORTANT: Before applying any of the following button link styles, make sure that the element you're applying the style to is ALREADY a link. See Working With Custom HTML Modules' Content Editors (WYSIWYG) to learn how to add a link inside your content editor.

Primary Button

Secondary Button

Tertiary Button

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


Spacing

  • Margin Bottom 0

  • Margin Bottom 15

  • Margin Bottom 20

  • Margin Bottom 25

  • Margin Bottom 65

  • Margin Bottom 85

  • Margin Bottom 100

  • Margin Top 0

  • Margin Top 15

  • Margin Top 20

  • Margin Top 25

  • Margin Top 65

  • Margin Top 85

  • Margin Top 100

  • Padding Bottom 0
  • Padding Bottom 15
  • Padding Bottom 20
  • Padding Bottom 25
  • Padding Bottom 65
  • Padding Bottom 85
  • Padding Bottom 100
  • Padding Top 0
  • Padding Top 15
  • Padding Top 20
  • Padding Top 25
  • Padding Top 65
  • Padding Top 85
  • Padding Top 100

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.

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

How do I create a "blank" page?

To create a blank page, click the "Add Page" button in the "CMS Primary Theme" theme, add a Page Name and select the "Default Content Page CMS" layout. Click "Add Page" at the bottom of the screen.

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 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, on a purple background.

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.

Hero Slider - (Section 1a)

Notes: This section is to be used as-is and is intended to be used as a top-level section as it includes H1 elements. Any updates must be made by a Radancy developer.

Notes to Developer: The slider can be used elsewhere on a page, but it is important that the H1 elements be changed if doing so. Suggested image sizes are: 640x400 - Mobile, 1440x560 - Desktop

Hero - (Section 1b)

Notes: This section is fully editable by the user. 720x415 is the suggested image size to use for this section.

Available Code Snippets:

  • v1 - Section 1 - Text: Use this code snippet in a "Section 1b - Text" Module to "reset" the module to its template content. Please be aware that the color of the text may differ in the editor than how it looks on the website. This is so the user can see the text when editing since it shows as the color white on the website.

Hero - (Section 1c)

Notes: This section is fully editable by the user. 720x415 is the suggested image size to use for this section.

Available Code Snippets:

  • v1 - Section 1 - Text: Use this code snippet in a "Section 1c - Text" Module to "reset" the module to its template content. Please be aware that the color of the text may differ in the editor than how it looks on the website. This is so the user can see the text when editing since it shows as the color white on the website.

Hero - (Section 1d)

Notes: This section is fully editable by the user. Suggested image sizes are: Mobile (Primary) - 640x400, Desktop (Secondary) - 1440x415.

Available Code Snippets:

  • v1 - Section 1d - Text: Use this code snippet in a "Section 1d - Text" Module to "reset" the module to its template content. Please be aware that the color of the text may differ in the editor than how it looks on the website. This is so the user can see the text when editing since it shows as the color white on the website.

Hero - (Section 1e)

Notes: This section contains 2 media modules that allows the user to add images on both the left and right. 720x415 is the suggested image size to use on the right. This module typically uses logos for the left side images, but can include other images as well.

Slider - (Section 2)

Notes: This section is to be used as-is. There can be different Section 2 sliders but the updates must be made by a Radancy developer.

Notes to Developer: The slider can be used anywhere on a page. Suggested image size is: 486x460.

Featured Careers

View open

Lorem ipsum

Positions
View open

Lorem ipsum

Positions
View open

Lorem ipsum

Positions
View open

Lorem ipsum

Positions
View open

Lorem ipsum

Positions
View open

Lorem ipsum

Positions

Ready to take your career in a fresh direction? Join a global leader in marketing, distributing and selling food across sectors. We may have over 71,000 colleagues (and counting) but sharing the common goal of feeding the world makes us feel like a tight team. Explore our open positions from tech and merchandising to sales and distribution.

View All Open Positions

Image and Copy - (Section 3a)

Notes: This section is fully editable by the user. 290x290 is the suggested image size. As a FYI, the gradient that wraps around the bottom of the image is part of the image.

Available Code Snippets:

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

Our Culture

I am very proud to work for a company with so many caring and talented people who all strive to make Sysco a great place to work.”

Daryl S.

Fleet Technician

Image and Copy - (Section 3b)

Notes: This section is fully editable by the user. 290x290 is the suggested image size. As a FYI, the gradient that wraps around the bottom of the image is part of the image.

Available Code Snippets:

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

Our Culture

I am very proud to work for a company with so many caring and talented people who all strive to make Sysco a great place to work.”

Daryl S.

Fleet Technician

Testimonial Slider - (Section 3c)

Notes: This section is to be used as-is. There can be different Section 3c sliders but the updates must be made by a Radancy developer. The primary use is to spotlight employee quotes.

Notes to Developer: The slider can be used anywhere on a page. Suggested image size is: 290x290. The gradient you see beneath the image is part of the image in the example.

Our Culture

I am very proud to work for a company with so many caring and talented people who all strive to make Sysco a great place to work.”

Daryl S.

Fleet Technician

I am very proud to work for a company with so many caring and talented people who all strive to make Sysco a great place to work.”

Daryl S.

Fleet Technician

I am very proud to work for a company with so many caring and talented people who all strive to make Sysco a great place to work.”

Daryl S.

Fleet Technician

Disclosure - (Section 4)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 4 - Content: Use this code snippet in a "Section 4 Content" Module to "reset" the module to its template content. Please be aware you will not see the blue background when using this code snippet. However, it does show on the website once the section is saved to a page.

PLEASE NOTE: Sysco does not charge a fee at any stage of the recruitment process. Any requests for the payment of fees should be refused and reported to local law enforcement for appropriate action.

Copy - (Section 4a)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 4 - Content: Use this code snippet in a "Section 4a Content" Module to "reset" the module to its template content. Please be aware the font size in the editor won't match the font size when seeing it on the website. This is due to the way the styling was done on the section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit.

Copy - (Section 5a)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 5 - Content: Use this code snippet in a "Section 5 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Copy - (Section 5b)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 5 - Content: Use this code snippet in a "Section 5 Content" Module to "reset" the module to its template content. Please note, that when using this code snippet, you will not see the section background. However, once saved and viewed on the website, the light gray background will appear.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Copy - (Section 5c)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 5 - Content: Use this code snippet in a "Section 5 Content" Module to "reset" the module to its template content. Please note, that when using this code snippet, you will not see the section background. However, once saved and viewed on the website, the light gray background will appear. Also, the heading will not appear as blue in the editor, but once on the website it will show correctly. This is all due to how the styling on the section was done.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Copy - (Section 5d)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 5 - Content: Use this code snippet in a "Section 5 Content" Module to "reset" the module to its template content. Please note, that when using this code snippet, you will not see the section background. However, once saved and viewed on the website, the gradient background will appear. Also, the button will look green in the editor, but once saved and on the website, it will be the correct white color it shows on the this guide. This is all due to how the styling was done on this section.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Copy - (Section 6a)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 6 - Content: Use this code snippet in a "Section 6 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Turpis egestas maecenas pharetra convallis posuere sed morbi. Tortor at auctor urna nunc id cursus metus lorem aliquam. Feugiat sed lectus vestibulum mattis vestbillum ullamcorper velit. Volutpat diam ut venenatis tellus. Aces turpis egestas maecenas pharetra convallis posuere amt morbi.

Turpis egestas maecenas pharetra convallis posuere sed morbi. Tortor at auctor urna nunc id cursus metus lorem aliquam. Feugiat sed lectus vestibulum mattis vestbillum ullamcorper velit. Volutpat diam ut venenatis tellus. Aces turpis egestas maecenas pharetra convallis posuere amt morbi.

Copy - (Section 6b)

Notes: This section is fully editable by the user, minus the background image.

IMPORTANT: After adding this section to a page, to update the background image you'll need to reach out to your contact at Radancy as the image must be updated by a developer.

Available Code Snippets:

  • v1 - Section 6 - Content: Use this code snippet in a "Section 6 Content" Module to "reset" the module to its template content. Please be aware, that when using this code snippet, the color of the text will be black. However, once saved and placed on the website, the color will be the white you see on the section in this guide.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Turpis egestas maecenas pharetra convallis posuere sed morbi. Tortor at auctor urna nunc id cursus metus lorem aliquam. Feugiat sed lectus vestibulum mattis vestbillum ullamcorper velit. Volutpat diam ut venenatis tellus. Aces turpis egestas maecenas pharetra convallis posuere amt morbi.

Turpis egestas maecenas pharetra convallis posuere sed morbi. Tortor at auctor urna nunc id cursus metus lorem aliquam. Feugiat sed lectus vestibulum mattis vestbillum ullamcorper velit. Volutpat diam ut venenatis tellus. Aces turpis egestas maecenas pharetra convallis posuere amt morbi.

Copy - (Section 7)

Notes: This section is fully editable by the user.

Available Code Snippets:

  • v1 - Section 7 - Content: Use this code snippet in a "Section 7 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Turpis egestas maecenas pharetra convallis posuere sed morbi. Tortor at auctor urna nunc id cursus metus lorem aliquam. Feugiat sed lectus vestibulum mattis vestbillum ullamcorper velit. Volutpat diam ut venenatis tellus.

Turpis egestas maecenas pharetra convallis posuere sed morbi. Tortor at auctor urna nunc id cursus metus lorem aliquam. Feugiat sed lectus vestibulum mattis vestbillum ullamcorper velit. Volutpat diam ut venenatis tellus.

Turpis egestas maecenas pharetra convallis posuere sed morbi. Tortor at auctor urna nunc id cursus metus lorem aliquam. Feugiat sed lectus vestibulum mattis vestbillum ullamcorper velit. Volutpat diam ut venenatis tellus.

Copy - (Section 8)

Notes: This section is fully editable by the user, minus the background image.

IMPORTANT: After adding this section to a page, to update the background image you'll need to reach out to your contact at Radancy as the image must be updated by a developer.

Available Code Snippets:

  • v1 - Section 8 - Content: Use this code snippet in a "Section 8 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Image and Copy - (Section 9a)

Notes: This section is fully editable by the user. 1000x565 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 9 - Content: Use this code snippet in a "Section 9 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

Image and Copy - (Section 9b)

Notes: This section is fully editable by the user. 1000x565 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 9 - Content: Use this code snippet in a "Section 9 Content" Module to "reset" the module to its template content. Please be aware that the color of the heading in the editor will be black. However, once saved and on the website, it will become the color blue like it is supposed to be.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

Image and Copy - (Section 9c)

Notes: This section is fully editable by the user. 1000x565 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 9 - Content: Use this code snippet in a "Section 9 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

Images and Copy - (Section 10)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 10 - Content: Use this code snippet in a "Section 10 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

Image and Copy - (Section 11a)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 11 - Content: Use this code snippet in a "Section 11 Content" Module to "reset" the module to its template content. Please note, the heading will show as the color black inside the editor. However, once saved and on the website, it will show as the color blue as you see below.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Image and Copy - (Section 11b)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 11 - Content: Use this code snippet in a "Section 11 Content" Module to "reset" the module to its template content. Please note, the heading will show as the color black inside the editor. However, once saved and on the website, it will show as the color blue as you see below.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Image and Copy - (Section 11c)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 11 - Content: Use this code snippet in a "Section 11 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Image and Copy - (Section 11d)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 11 - Content: Use this code snippet in a "Section 11 Content" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

CTA

Image and Copy - (Section 12a)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 12 - Content: Use this code snippet in a "Section 12 Content" 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.”

– Name, Title

“Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit.”

– Name, Title

“Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.”

– Name, Title

Image and Copy - (Section 12b)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use.

Available Code Snippets:

  • v1 - Section 12 - Content: Use this code snippet in a "Section 12 Content" 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.”

– Name, Title

“Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit.”

– Name, Title

“Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.”

– Name, Title

Multi Item - (Section 13)

Notes: This section is fully editable by the user. 486x460 is the suggested image size to use. There are separate code snippets for each of the boxes because each contains a slightly different piece of code and that code must remain in its corresponding module.

Available Code Snippets:

  • v1 - Section 13 - Content: Use this code snippet in a "Section 13 Content" Module to "reset" the module to its template content.
  • v1 - Section 13 - HP box one: Use this code snippet in a "Section 13 - HP box one" Module to "reset" the module to its template content.
  • v1 - Section 13 - HP box two: Use this code snippet in a "Section 13 - HP box two" Module to "reset" the module to its template content.
  • v1 - Section 13 - HP box three: Use this code snippet in a "Section 13 - HP box three" 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. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit. Volutpat diam ut venenatis tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Icon and Copy - (Section 14a)

Notes: This section is fully editable by the user. 80x71 is the image size being used in the example below. However, icons can range in size. Try to keep the dimensions as close as possible. There are separate code snippets for each of the boxes because each contains a slightly different piece of code and that code must remain in its corresponding module.

Available Code Snippets:

  • v1 - Section 14 - Heading: Use this code snippet in a "Section 14 Heading" Module to "reset" the module to its template content.
  • v1 - Section 14a - Section 14a icon para one: Use this code snippet in a "Section 14a icon para one" Module to "reset" the module to its template content.
  • v1 - Section 14a - Section 14a icon para two: Use this code snippet in a "Section 14a icon para two" Module to "reset" the module to its template content.
  • v1 - Section 14a - Section 14a icon para three: Use this code snippet in a "Section 14a icon para three" Module to "reset" the module to its template content.
  • v1 - Section 14a - Section 14a icon para four: Use this code snippet in a "Section 14a icon para four" Module to "reset" the module to its template content.

Lorem Ipsum

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Icon and Copy - (Section 14b)

Notes: This section is fully editable by the user. 80x71 is the image size being used in the example below. However, icons can range in size. Try to keep the dimensions as close as possible. There are separate code snippets for each of the boxes because each contains a slightly different piece of code and that code must remain in its corresponding module. IMPORTANT: Please notice that you use the Section 14a code snippets for this section.

Available Code Snippets:

  • v1 - Section 14 - Heading: Use this code snippet in a "Section 14 Heading" Module to "reset" the module to its template content. Please note, the heading in the editor will appear blue in color. However, once saved and viewed on the website, the heading will be the color black as you see in the example below.
  • v1 - Section 14a - Section 14a icon para one: Use this code snippet in a "Section 14b icon para one" Module to "reset" the module to its template content.
  • v1 - Section 14a - Section 14a icon para two: Use this code snippet in a "Section 14b icon para two" Module to "reset" the module to its template content.
  • v1 - Section 14a - Section 14a icon para three: Use this code snippet in a "Section 14b icon para three" Module to "reset" the module to its template content.
  • v1 - Section 14a - Section 14a icon para four: Use this code snippet in a "Section 14b icon para four" Module to "reset" the module to its template content.
  • IMPORTANT: The icons in the editor may appear a different color when using one of the above icon code snippets, however you can replace the icons with whatever color you choose. Just be aware that they will be on a gradient background like you see below in the example.

Lorem Ipsum

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Lorem ipsum dolor sit amet, consec incididunt ut labore et dolore aliqua.

Awards - (Section 14c)

Notes: This section is fully editable by the user. 180x130 is the suggested image size to use.

Available Code Snippets:

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

Lorem Ipsum

Awards - (Section 14d)

Notes: This section is fully editable by the user. 283x96 is the suggested image size to use.

Images - (Section 14e)

Notes: This section is fully editable by the user. 553x290 is the suggested image size to use.

Images and Copy - (Section 15)

Notes: This section is fully editable by the user. 272x200 is the suggested image size to use. There are separate code snippets for each of the boxes because each contains a slightly different piece of code and that code must remain in its corresponding module.

Available Code Snippets:

  • v1 - Section 15 - Heading: Use this code snippet in a "Section 15 Heading" Module to "reset" the module to its template content.
  • v1 - Section 15 - Image Link One: Use this code snippet in a "Section 15 image link one" Module to "reset" the module to its template content.
  • v1 - Section 15 - Image Link Two: Use this code snippet in a "Section 15 image link two" Module to "reset" the module to its template content.
  • v1 - Section 15 - Image Link Three: Use this code snippet in a "Section 15 image link three" Module to "reset" the module to its template content.
  • v1 - Section 15 - Image Link Four: Use this code snippet in a "Section 15 image link four" Module to "reset" the module to its template content.

Lorem Ipsum

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Copy - (Section 16a)

Notes: This section is fully editable by the user. There are separate code snippets for each of the boxes because each contains a slightly different piece of code and that code must remain in its corresponding module.

Available Code Snippets:

  • v1 - Section 16 - Heading: Use this code snippet in a "Section 16 Heading" Module to "reset" the module to its template content. Please note, the color of the heading in the WYSIWYG may not match the heading color that you see for the section on the CMS Guide, but once saved inside the section and placed on a page, the heading will show the correct color.
  • v1 - Section 16a - Link Para One: Use this code snippet in a "Section 16a link para one" Module to "reset" the module to its template content.
  • v1 - Section 16a - Link Para Two: Use this code snippet in a "Section 16a link para two" Module to "reset" the module to its template content.
  • v1 - Section 16a - Link Para Three: Use this code snippet in a "Section 16a link para three" Module to "reset" the module to its template content.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Copy - (Section 16b)

Notes: This section is fully editable by the user. There are separate code snippets for each of the boxes because each contains a slightly different piece of code and that code must remain in its corresponding module.

Available Code Snippets:

  • v1 - Section 16 - Heading: Use this code snippet in a "Section 16 Heading" Module to "reset" the module to its template content.
  • v1 - Section 16b - Heading Para One: Use this code snippet in a "Section 16b heading para one" Module to "reset" the module to its template content.
  • v1 - Section 16b - Heading Para Two: Use this code snippet in a "Section 16b heading para two" Module to "reset" the module to its template content.
  • v1 - Section 16b - Heading Para Three: Use this code snippet in a "Section 16b heading para three" Module to "reset" the module to its template content.

Lorem Ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas maecenas pharetra convallis posuere morbi. Tortor at auctor urna nunc id cursus metus aliquam.

Copy - (Section 16c)

Notes: This section is fully editable by the user. There are separate code snippets for each of the boxes because each contains a slightly different piece of code and that code must remain in its corresponding module.

Available Code Snippets:

  • v1 - Section 16 - Heading: Use this code snippet in a "Section 16 Heading" Module to "reset" the module to its template content.
  • v1 - Section 16c - Heading Para Link One: Use this code snippet in a "Section 16b heading para link one" Module to "reset" the module to its template content.
  • v1 - Section 16c - Heading Para Link Two: Use this code snippet in a "Section 16b heading para link two" Module to "reset" the module to its template content.
  • v1 - Section 16c - Heading Para Link Three: Use this code snippet in a "Section 16b heading para link three" Module to "reset" the module to its template content.

Lorem Ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consecte tur elit, dolore magna aliqua.

(555) 555-5555 View on Map
Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consecte tur elit, dolore magna aliqua.

(555) 555-5555 View on Map
Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consecte tur elit, dolore magna aliqua.

(555) 555-5555 View on Map

Related Content Static - (Section 17a)

Notes: This section is fully editable by the user. The user sets the content to display by choosing 3 pages from the Content Page Display module.

Related Content Dynamic - (Section 17b)

Notes: This section is to be used as-is. Any updates are to be made by a Radancy developer.

Copy - (Section 18)

Notes: This section is fully editable by the user. This can be used as a good starting section for a new page or when adding in some general copy or a blog.

Code Snippets:

  • v1 - Section 18 - Copy: Use this code snippet as a reset on this module.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.