Skip to main content

Headline goes here

Subheadline goes here

Dev Guide Page

Last updated 06/24/25

Dev Notes

  • This site contains 4 brand themes. The brand thems are CommonSpirit, CHI, Dignity Health, and Virginia Mason. The CommonSpirit Brand is pink. The CHI brand is primarily blue. The Dignity Health brand is primarily orange. The Virginia Mason brand is primarily green.
  • This site uses CSS variables to control the color changes in all 4 themes. There are 5 stylesheets for this site. All styles should be added to the GST-v1_0-GST stylesheet. The only changes that should be added to each brand stylesheet is the sass variable and the css variable that was created in the GST-v1_0-GST stylesheet. Please use variables to define the colors. The only css rules that should be added to each brand sass files are ones where sass functions are needed to update the colors. Such as custom svg icons, or sass lighten/darken functions. Using Css variables reduces the additional css rules needed to change the color of one element
  • This site uses the CSS Grid feature (.forced-container) of the Flexspan Grid System. On mobile devices the number of columns is set to 12. In most cases the flex span classes will work fine. However due to the grid span classes not including a starting column number you may need to create classes to set both the grid-colum with both start amd end values. Example grid-column: 3 / span 9; Documentation can be found here.
  • The site uses CSS logical properties rather then physical properties. Documentation can be found here
  • Hero Banner – This site has two types of hero banners. The first is the one that can be seen on the Core pages and on all the content pages off the navigation. The second is the one on the Search Results and Job details page for the custom themes. There are a few differences in the settings for the section based on whether it is the default Hero Banner or the one that can be found on the search results page.
    • Default Banner
      • There are two images for the hero image. The mobile banner is set in the layout to have a width of 320px and a height of 364px. The image size added to the assets folder is 960px x 1092px. The desktop image is set in the layout to have a width of 1440ppx and a height of 460px. The desktop image size added to the asset folder is 2880px x 920px.
      • Most of the current banners are sized to 2x on mobile and 1x on desktop
    • Custom Search Results /Job Details Hero images
      • There is only one image for the banner. The banner image should be placed in the “Primary” image in the module. The mocked image dimensions are set to have a width of 1440px and a height of 375px. The image dimensions added to the assets folder are 2880px x 750px.
      • To use the styles of the search results hero, add “hero-search” to the section identifier field.
  • Animations See below.

Typography

There are two font families that are used on this site the first is IsidoraSans and the second is Open Sans. All font varients for both fonts are available to use. There is only one font family varable for each font. The correct font will be used by controling the font weight and font style.

The Open Sans font is currenty only used in a few sections of the site. Those areas are in the search form, the Search Results Hading, and the Job information section of each job on the search results page. Thje rest of the site uses the IsidoraSans font.

These typography classes are applied throughout the site. These classes can be applied to any text html element and will work. In some cases module specific classes extend one of the below listed typography classes. For example, ".section4-content__hl" extends the "heading1" class.

Refer to the "~ All Text Styles (Style Management) - CMS" code snippet for a template with the classes applied. They are also available in the "style management" dropdown in custom html modules.

Headline Banner - IsidoraSans (Semi Bold) 25.5px / 51px (.headline__banner)

Headline Large - IsidoraSans 22px / 44px (.headline__large)

Headline Medium Large - IsidoraSans 19.5px/39px (.headline__medium-large)

Headline Heading 3 - IsidoraSans (Light) 16px / 30px (.headline__heading3)

Headline Medium - IsidoraSans 16px/26px (.headline__medium)

Body Copy - IsidoraSans 17px with a 25px line-height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum aliquet nunc, at interdum ex egestas varius. Donec vel fermentum justo, quis maximus lectus. Cras porta feugiat ultrices.

**Additional typography class options:

  • .text-center - To center text. Can also be used as a module identifier to center the entire block.
  • .color-secondary-1 When viewed in the admin or any page inside the Default Theme the color is purple otherwise it is the same as the primary color of the theme.

Buttons

  • Button 40px tall

    Extends = @extends .btn-learn-more;

    Mixin: @mixin btn($background: var(--primary), $color: var(--primary-contrast), $width: auto)

  • class = "btn-learn-more"

Color Variables

Note: There are additional color variables included in this site but the most commonly used color variables are listed here

  • var(--primary) – #bc4b9a Note: Will be the above color in the following themes: Default, Primary CMS Theme
  • var(--primary) – #24509a Note: Will be the above color in the following themes: CHI
  • var(--primary) – #24509a Note: Will be the above color in the following themes: Dignity Health
  • var(--primary) – #24509a Note: Will be the above color in the following themes: Virginia Mason
  • var(--color-secondary-01) – #855a91 Note: Will be purple in the default theme otherwise it will be the primary color of the theme it is located in
  • var(--search-form-mobile-background) – #c059a0 Note: Will be the above color in the following themes: Default, Primary CMS Theme
  • var(--search-form-utility-links-border-color) – #8d2c6f var(--section-3-background) Note: Will be the above color in the following themes: Default, Primary CMS Theme
  • var(--section-3-background) – #4e77b5 Note: Will be the above color in the following themes: CHI
  • var(--search-form-utility-links-border-color) – #0e3981 Note: Will be the above color in the following themes: CHI
  • var(--section-3-background) – #ed7420 Note: Will be the above color in the following themes: Dignity Health
  • var(--search-form-utility-links-border-color) – #ab4600 Note: Will be the above color in the following themes: Dignity Health
  • var(--section-3-background) – #55a63a Note: Will be the above color in the following themes: Virginia Mason
  • var(--search-form-utility-links-border-color) – #258704 Note: Will be the above color in the following themes: Virginia Mason
  • var(--alert) – #cc0000
  • var(--text) – #323232
  • var(--text-gray) – #6f7072
  • var(--color-gray) – #808080
  • var(--color-light-gray) – #f1f3f6
  • var(--color-medium-gray) – #d0d0d0
  • var(--color-medium-dark-gray) – #5f5f5f
  • var(--dark-gray) – #444444
  • var(--footer-background) – #47344c
  • var(--social-media-item-background) – #aba3ae
  • var(--disclosure-heading-color) – #757575
  • var(--disclosure-link-color) – #1aac9f
  • var(--disclosure-border-color) – #c4c4c4

Grid System

Most of the site uses a 12-grid system within the site content max of 1200px. The column spacing --fs-spacing-col is 15px. The row spacing --fs-spacing-row is 15px. The site uses twelve columns. Flexspan Grid System documentation: https://brockenstein.github.io/Flexspan-Grid-System/#grid-system.

fs col span 12
fs col span 1
fs col span 11
fs col span 2
fs col span 10
fs col span 3
fs col span 9
fs col span 4
fs col span 8
fs col span 5
fs col span 7
fs col span 6
fs col span 6
fs col span 1
fs col span 6
fs col span 5

Global Spacing Helper Classes

  • .section-spacing

Animations

This site uses Animate.css from animate.style for its animations. The animations are currently built into the layouts. At the momoment there are only a few sections that utilize the animations. The sections are Section 6 and its varients, Section 7 and its variants, Section 9, Section 14.

To have a section animate you need to add the following code to the element you want to animate. data-element="enhance-element" data-element-animation="ANIMATIONNAME"

Example animation names:

  • fadeInRight
  • FadeInLeft
  • fadeInUp
  • fadeInDown

CMS Enabled Section Templates ("Add New")

Listed on CMS Guide Page

"Use Existing" Sections

Listed on CMS Guide Page

Name: Multi Item - (Section 8)

CMS Enabled? Yes

The CHI, Dignity Health, and Virginia Mason items are shared with the same icons in the header. If these items are updated, they will also be updated in the header. The element animates from the left side of the screen.

Name: Map - (Section 10)

CMS Enabled? No

  • The intro text is updated inside of the job map module.
  • There is a second map that can be used. Its section Map - (Section 10a)   The only difference is that the map is for the executive jobs. Unable to place it on this page due to code restrictions.

Leading in humankindness across the nation

As one of the nation’s largest nonprofit systems, CommonSpirit Health now has more than 2,300 care sites and 137 hospitals in 24 states. We serve some of the most diverse communities across the nation and in each location, humankindness leads the way.

Loading map..

Name: Slider - (Section 11)

CMS Enabled? No

  • This section turns into a slider on mobile devices.
  • Code snippet is "Section 11 - Copy Text"

CommonSpirit Health: by the numbers

157,000

Team Members

24

States

2,300

Care sites

137

Hospitals

Name: Slider - (Section 12)

CMS Enabled? No

  • This is a slider. each slide is a template.
  • Code snippet: Section 12 - Copy Text - Dev Only
  • Code snippet: Section 12 - Slide Content - Dev Only

Our pledge of humankindness.

Pic: Paul

Meet Paul

"As a member of the LGBTQA community, I can say that this organization has allowed me to be "me" without worry..."

Pic: June

Meet June

"In our inclusive spaces, we’re encouraged to listen to each other’s worldview and share our cultural backgrounds to be our authentic selves."

Pic: Shabnam

Meet Shabnam

"The culture of humankindness not only applies to our patient care, but also to our common practice among our peers."

Pic: Wanda

Meet Wanda

"It is extremely satisfying to work with a team that wants to be engaged in meaningful work and serves a higher purpose."

Name: Widget - (Section 12a)

CMS Enabled? Yes

  • This is the section for displaying the Altru videos on the content pages.
  • The code snippet is "Section 12 - Copy Text"

Lorem ipsum dolor sit amet

Name: Slider - (Section 21)

CMS Enabled? No

Our shared values

Our values at CommonSpirit Health are the core principles that enable and inspire us to deliver humankindness.

Icon: Compasssion

Compassion

  • Care with listening, empathy and love.
  • Accompany and comfort those in need of healing.
Icon: Inclusion

Inclusion

  • Celebrate each person’s gifts and voice.
  • Respect the dignity of all.
Icon: Integrity

Integrity

  • Inspire trust through honesty.
  • Demonstrate courage in the face of inequity.
Icon: Excellence

Excellence

  • Serve with fullest passion, creativity, and stewardship.
  • Exceed expectations of others and ourselves.
Icon: Collaboration

Collaboration

  • Commit to the power of working together.
  • Build and nurture meaningful relationships.

Name: Event - (Section 22)

CMS Enabled? No

Events are pulled in from an external source

Witness our next event and join our team.

Experience our upcoming events in humankindness-virtual or in-person. Preview and schedule events by category: region, specialty, or facility. Interested in attending?

Loading events...

Name: Disclosure - (Section 26)

CMS Enabled? No

Our Top Frequently Asked Questions

  • No, you do not. Based on complexity of the role, some jobs will require specific healthcare experience, but we also have a wide range of opportunities matching your degree or previous experience regardless of the industry. View our current career opportunities here.

  • You can search our open jobs by typing in a job title or keyword in the designated search box and then selecting your desired location before clicking "Search Jobs." Once your matching job results appear, you can then use Filters to the left of your search results to narrow down jobs based on your preferences.

    For remote jobs, type in a job title or keyword and leave the location field blank. Once your job results appear, select Yes under the remote filter.

  • New hires can work from any of the locations listed in the job posting.

  • A remote job is defined as a job where your primary work location is outside of a CommonSpirit building because the essential work can be completed remotely for the majority of the time on an average week.

  • Minimum Qualifications are the minimum requirements needed to quality for a job.

    Preferred Qualifications are desired and enhance applications that also meet minimum requirements.

  • CommonSpirit offers benefit solutions that are thoughtfully designed to support team members both personally and professionally. Visit our Total Rewards page to see what you have to look forward to.

  • A basic profile is automatically created for you when using your current email address to sign up to receive job alerts.

    You can create a detailed profile by clicking the Apply button on any open job. While resumes are not required to create profiles, we highly encourage all job seekers to attach one sooner rather than later.

  • In addition to saving time, creating a candidate profile unlocks your custom candidate dashboard- providing you with a single-view summary of jobs you've applied for and the current status of your application(s) across all of CommonSpirit, including CHI, Dignity Health, MercyOne, and/or Virginia Mason Franciscan Health.

    Your dashboard is also where you can conveniently take action on your profile and applications.

    You can do things like finishing your incomplete applications, update your profile or your answers to screening questions, upload resumes and/or certifications, manage job alerts, withdraw an application, or search for more open jobs.

  • We encourage team members to live their truth at work- in a safe space where differences strengthen us as a high-performing health system. Learn more about our commitment to diversity, inclusion, equity, and belonging.

  • We understand starting a new job search can be overwhelming for any job seeker, and it can be challenging if you have spent years serving in the military. Please use our military translator to help you search for open jobs across CommonSpirit and our affiliates.

  • humankindness (verb) This made-up word — mashing together “humanity” and “kindness”, serves as a simple way to describe what is a very rich heritage of healing and service.

    A career in humankindness is about joining a movement where people are more connected to each other, where no matter what position you have in the organization, we all hold the power to heal.

  • Yes. We maintain a high degree of integrity when it comes to protecting your information. Please click here to view our Privacy Notice.

  • If you have visited our website in search of information on employment opportunities or to apply for a position, and you require accommodation, please contact (415) 438-5575.

  • We recommend using Google Chrome on your desktop or mobile device for a better apply experience.

  • On the login page, click "Forgot your password?" Type in the same email address you entered when you submitted your application, check your email for a reset link, create your new password, and finally return to the login homepage to log in and view your candidate dashboard.

  • A pop-up blocker can negatively impact your application experience. If you see "Pop-Up Blocker" listed as a selection under the "Tools" drop-down list, then your computer has a Pop-Up Blocker installed.

    To determine if your Pop-Up Blocker is turned on, click on the "Pop-Up Blocker" selection. If "Turn Off Pop-Up Blocker" is highlighted, then the Pop-Up Blocker on your computer is currently turned on.

    To temporarily disable your computer's Pop-Up Blocker, click on the "Turn Off Pop-Up Blocker" selection.

  • If trouble occurs when uploading your resume, you'll want to check the format of your resume. The CommonSpirit Health Careers Website accepts the following document formats: Microsoft Word, Adobe PDF, or Text Files. If you attempt to upload a resume in other formats, such as WordPerfect, you may receive an error message.

  • If you have questions about your application or want to learn more about a career with CommonSpirit Health, please email careers@commonspirit.org.

Name: Disclosure - (Section 26a)

CMS Enabled? No

Name: Disclosure - (Section 26b)

CMS Enabled? No

FAQs

The CommonSpirit Health Administrative Fellowship is a national 18 month system-wide fellowship offered in our various departments and operational regions. Our fellowship program operates in a cohort model, meaning that our fellows have the opportunity to develop meaningful connections and relationships with fellows and leaders from across the organization and across different functions. Each fellow will have the opportunity to serve in a leadership capacity, as identified in conjunction with their Executive Champion.

With an 18 month program each fellow will have ample time to explore the largest not-for-profit health system and become immersed in a variety of areas ranging from: hospital, ambulatory, and leadership functions including national discussions. This program also allows fellows to take on large, complex projects that might not be feasible with a shorter fellowship.

Goals:

  • Attract, grow and retain the most qualified future leaders for post-fellowship transition within CommonSpirit Health
  • Build a solid foundation for future leaders through hands-on learning experiences, exposure to clinical and non-clinical aspects and mentoring from experienced health care leaders
  • Promote various leadership perspectives, experiences, and thoughts, to reflect the communities we serve

To hear what our fellows have to say, read through our fellowship features on our LinkedIn page

The CommonSpirit Health Administrative Fellowship is intended for early careerists, defined as those who have less than five years of experience in their current field. We accept applications from both internal and external candidates. The CommonSpirit Health Fellowships are full time positions that will require a current team member to leave their current position in order to pursue the fellowship opportunity.

Eligible applicants must have completed, or will have completed upon conclusion of fellowship, an applicable degree from an accredited graduate program. Applicants must have successfully completed all on-campus, didactic requirements of their academic program and will graduate upon completion of Fellowship. We will consider applications within two years of completing a graduate degree program.

CommonSpirit Health cannot sponsor international visas.

Traditionally, we welcome candidates to the final round of in-person interviews. Expenses will be compensated by CommonSpirit Health. Further information will be provided throughout the interview process.

If you would like to talk with a current fellow, please email us at administrativefellowship@commonspirit.org and indicate which opportunities you are most interested in.

Name: Accordion Grid - (Section 30)

CMS Enabled? No

Explore our offerings

Here are some highlights of our Total Rewards package. Eligibility for specific benefits plans may vary.

We believe in sharing the rewards that come from furthering our mission. We offer competitive compensation packages and an array of additional programs, such as individual and organizational performance incentives, relocation, peer-to-peer recognition, and more!

Our time at work makes a real difference in our communities. We want our team members to have time for the moments that matter away from work, too. We offer holidays, paid time off, and flexibility to help team members prioritize work-life balance.

Building healthy communities starts with a healthy workforce. Our medical, prescription drug, dental, and vision options let team members choose the coverage that’s right for them. Tax-advantaged spending and savings accounts help make that care more affordable.

We advocate for lifelong learning that advances your personal and professional growth. We give team members access to free tools and resources that help them make ongoing, positive contributions in their field of study.

Financial security is more than numbers. It’s also feeling confident about money now and in the future. We offer disability coverage, life insurance, retirement plans, adoption assistance, pet insurance and access to student debt relief programs and support from financial advisors.

Our Total Rewards focus on your total well-being. We offer a free mental health benefit, family care benefits through Care.com, tuition reimbursement opportunities, and a wellness incentive program designed to make healthy living simple and fun.

Equal Opportunity

CommonSpirit Health™ is an Equal Opportunity/Affirmative Action employer committed to a diverse and inclusive workforce. All qualified applicants will be considered for employment without regard to race, color, religion, sex, sexual orientation, gender identity, national origin, age, disability, marital status, parental status, ancestry, veteran status, genetic information, or any other characteristic protected by law. For more information about your EEO rights as an applicant, please click here.

CommonSpirit Health™ will not discharge or in any other manner discriminate against employees or applicants because they have inquired about, discussed, or disclosed their pay or the pay of another employee or applicant. However, employees who have access to the compensation information of other employees or applicants as a part of their essential job functions cannot disclose the pay of other employees or applicants to individuals who do not otherwise have access to compensation information, unless the disclosure is (a) in response to a formal complaint or charge, (b) in furtherance of an investigation, proceeding, hearing, or action, including an investigation conducted by the employer, or (c) consistent with the contractor’s legal duty to furnish information. 41 CFR 60-1.35(c). External hires must pass a post-offer, pre-employment background check/drug screen. Qualified applicants with an arrest and/or conviction will be considered for employment in a manner consistent with federal and state laws, as well as applicable local ordinances, ban the box laws, including but not limited to the San Francisco and Los Angeles Fair Chance Ordinances. If you need a reasonable accommodation for any part of the employment process, please contact us by telephone at (415) 438-5575 and let us know the nature of your request. We will only respond to messages left that involve a request for a reasonable accommodation in the application process. We will accommodate the needs of any qualified candidate who requests a reasonable accommodation under the Americans with Disabilities Act (ADA). CommonSpirit Health™ participates in E-Verify.