Skip to main content

CMS GUIDE

Style Guide

This style guide includes colors, typography, icons, buttons, fields, grid and images. You can download any of the assets on the assets tab in the Zeplin link.

Primary Colors

Red
HEX #e72011

Black
HEX #000000

White
HEX #ffffff

Secondary Colors

Accent Yellow
HEX #fdda24

Accent Orange
HEX #ffbf3f

Accent Green
HEX #84bd00

Neutral Colors

Neutral Gray 1c
HEX #d9d9d6

Neutral Gray 4c
HEX #bbbcbc

Neutral Gray 8c
HEX #888b8d

Typography (Headlines & SubHeadlines)

  • Headline 1 Futura PT Medium 54pt with 64pt line-height

  • Headline 2 Futura PT Medium 42pt with 50pt line-height

  • Headline 3 Futura PT Medium 28pt with 34pt line-height

  • Headline 4 Museo Sans 700 24pt with 30pt line-height

  • Headline 5 Museo Sans 700 22pt with 30pt line-height
  • Headline 6 Museo Sans 700 20pt with 28pt line-height
  • This is body copy using Museo Sans 300 at 18px, with a 30px line-height in the color of #000000. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui.

Section Guide

Important! Before using a section from this guide, please read the corresponding documentation for that section. Documentation is found above each section in this guide.

Note that section titles are color coded based on which menu they can be found in after clicking the "add section" button on any page:

Red - find this section in the "Use Existing" Menu.
Green - find this section in the "Add New" Menu.

Keep in mind that when you edit a section from the "Use Existing" Menu, you are editing every instance of that section. Sections added via the "Add New" Menu are safe to be edited freely, as a new instance of the section is created every time it's added to a page.

Hero - (Section 11a)

Suggested Use: Hero Banner

Notes: This section has an balck gradient bar bottom to top with Title

Available Code Snippets: No

Lorem Ipsum text of the printing

Global Search Form - (Section 24a)

Suggested Use: Add the search form to the page

Search Jobs

Copy and Image - (Section 1a)

Suggested Use: Short copy facing a supporting "square" image

Notes: The recommended image size is 500x500. Images that do not have an aspect ratio of 1:1 will be cropped/zoomed to fit, but this should be avoided. Do not use this section for video content, as the "Section 1 - Image" Media Module is intentionally configured to only accept a media type of image.

Available Code Snippets:

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

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.

Copy and Image - (Section 1b)

Suggested Use: Short copy facing a supporting "square" image

Notes: The recommended image size is 500x500. Images that do not have an aspect ratio of 1:1 will be cropped/zoomed to fit, but this should be avoided. Do not use this section for video content, as the "Section 1 - Image" Media Module is intentionally configured to only accept a media type of image.

Available Code Snippets:

  • v1 - Section 1 - Copy See section 1a

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.

Image and Copy - (Section 2a)

Suggested Use: Image Right and Overlap Copy Left with CTA

Notes: In this section, a Copy square appears at the top of the Image. For devices with resolutions larger than 1000px, no overlays the image.

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.

Lorem Ipsum Dolor

Image and Copy - (Section 2b)

Suggested Use:Image Left and Overlap Copy Right with CTA

  • v1 - Section 2 - Copy See section 2a

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.

Lorem Ipsum Dolor

Image and Copy - (Section 22a)

Suggested Use: Image Right and Overlap Copy Left with No CTA

Notes: In this section, a Copy square appears at the top of the Image. For devices with resolutions larger than 1000px, no overlays the image.

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.

Image and Copy - (Section 22b)

Suggested Use:Image Left and Overlap Copy Right with CTA

  • v1 - Section 22 - Copy See section 22a

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.

Testimonial Slider - (Section 3a)

Suggested Use: Testimonial Slider

Notes: The testimonials in this section are part of a module that is not CMS editable

Available Code Snippets:N/A

Profile

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Copy Name

Copy Position

Profile

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Copy Name

Copy Position

Profile

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Copy Name

Copy Position

Copy - (Section 4a)

Suggested Use: Intro Copy

Notes: The following section should be used for intro sections. This section center aligned to display the contents of this section.

Available Code Snippets:

  • Copy - (Section 4a): [code snippet notes/instructions]

Lorem Ipsum Dolor

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.

Accordion Grid - (Section 6a)

Suggested Use: Accordion Grid

Notes: This section has multiple tiles with title, and have dropdown copys

Available Code Snippets: N/A

Lorem Ipsum Dolor

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  • Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  • Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  • Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  • Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  • Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  • Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

    Headline 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Job Lists - (Section 7a)

Suggested Use: TabAccordion for different Job Lists

Notes: This is place on the theme level and cannot be remove. It wil show on all pages that are created.

Available Code Snippets: N/A

Related Content - (Section 14a)

Suggested Use: Display Dynamic Related Content

Notes:This section add any page.

Available Code Snippets:N/A

Related Content

Career Areas - (Section 8a)

Suggested Use: Career Areas copy and links to search results page for individual categories

Notes: N/A

Available Code Snippets:N/A

Career Areas

You have drive and compassion. We have opportunities that will bring out the best in you. Join us in your area of interest, and help us improve the lives of children.

Note To Developer: Please include documentation for this section!

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.

Lorem Ipsum Dolor

Section 1c

Suggested Use: Short copy facing a supporting "square" image

Notes: The recommended image size is 500x500. Images that do not have an aspect ratio of 1:1 will be cropped/zoomed to fit, but this should be avoided. Do not use this section for video content, as the "Section 1 - Image" Media Module is intentionally configured to only accept a media type of image.

Available Code Snippets:

  • v1 - Section 1 - Copy See section 1a

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. Excepteur sint occaecat cupidatat non proident.

Lorem ipsum
Discover your purpose with us

v1 - Q&A - (Section 37a)

Suggested Use: Intro Copy

Notes: The following section should be used for intro sections. This section center aligned to display the contents of this section.

Available Code Snippets:

  • Section 37a - Question: adds one question

Lorem Ipsum Dolor

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

A) 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. Excepteur sint occaecat cupidatat non proident.

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

A) 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. Excepteur sint occaecat cupidatat non proident.

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

A) 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. Excepteur sint occaecat cupidatat non proident.

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

A) 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. Excepteur sint occaecat cupidatat non proident.

v1 - article - (Section 37b)

Suggested Use: Intro Copy

Notes: The following section should be used for intro sections. This section center aligned to display the contents of this section.

Available Code Snippets:

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. Excepteur sint occaecat cupidatat non proident.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. Excepteur sint occaecat cupidatat non proident

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. Excepteur sint occaecat cupidatat non proident.

Testimonial - (Section 3b)

Suggested Use: Single editable Testimonial

Notes: The testimonial has an media for image and copy the section the snippet has default formatting for the quote

Available Code Snippets:Section 3b - Default Copy

Profile

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Copy Name

Copy Position

Career Areas - (Section 8b)

Suggested Use: Career Areas copy and links to search results page for individual categories

Notes: N/A

Available Code Snippets:N/A

Lorem ipsum

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

Icons and Copy - (Section 5a)

Suggested Use: Icon and Copy

Notes: This section used to Icon and Copy, Its not editable

Available Code Snippets:

  • Icons and Copy - (Section 5a)

Lorem Ipsum Dolor

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Care Locations
Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Care Locations
Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Care Locations
Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Icon with heading - (Section 5b)

Suggested Use: Icon and Copy

Notes: This section used to add Icons with a header, there is 3 aviliable columns

Available Code Snippets:

  • Headline - (Section 5b)

Talent Community Form - (Section 9a)

Suggested Use: Talent Community form

Notes: [section notes/instructions]

Available Code Snippets:

  • [code snippet name]: [code snippet notes/instructions]

Join Our Talent Network

You'll receive job alerts and career tips, along with direct emails from our recruiters. You'll also have the option to opt in to receive text messages from our recruitment team.

Talent Community Login

Interested InSearch for a category and select one from the list of suggestions. Search for a location and select one from the list of suggestions. Finally, click “Add” to create your job alert.

View Events - (Section 20a)

Suggested Use: Looking to connect in person

Notes: This section has view the latest events

Available Code Snippets: N/A

Looking to connect in person?

Check out our latest job fairs.