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.
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
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.
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.
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
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
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.
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) [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.
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.
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.
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.
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
- Program Coordinator Palliative Care Birmingham, Alabama Clinical Professional Full-time
- Mental Health Therapist Birmingham, Alabama Clinical Professional On-call/Flexi
- Central Distribution Technician Birmingham, Alabama Patient Care Support Full-time
h2
There are currently no recently viewed jobs.
h2
You have not saved any jobs.
Related Content - (Section 14a)
Suggested Use: Display Dynamic Related Content
Notes:This section add any page.
Available Code Snippets:N/A
Related Content
-
-
-
-
-
-
Test Page 1: Default Content Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
Building a Career at Children’s of Alabama At Children’s, we encourage our employees to push the boundaries of their own careers. Danielle Williamson is living out the Children’s of Alabama mission of doing just that.
-
Getting to Know Children's: 9 Harbert 9 Harbert is a 24-bed medical-surgical unit with a focus on children with nephrology and gastrointestinal disorders, which includes kidney and liver transplant patients.
-
Getting to Know Children's: New Hires With the help of our orientation programs and current employees' assistance, all new hires can go on to lead long and successful careers with Children’s of Alabama.
Job Locations Map - (Section 16a)
Suggested Use: About the Location
Notes: This section Explore the Area
Available Code Snippets: N/A
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!
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.
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
Find out about our latest opportunities and receive job alerts that match your preferences.