Skip to content
Northeastern University Bachelors Completion Home
Saved Programs Explore Programs

CMS Style Guide

Discover when and how to incorporate the building blocks of the Northeastern University Graduate Programs website onto specific pages.

Hero Components

There is a hero at the top of every page on the website. Most pages use a standard hero component, but the homepage, Program Detail pages, and story posts utilize their own style of hero.

A modern office space with large windows and a view of greenery outside. Three people are sitting around a table, engaging in a conversation. The text on the left side of the image describes academic programs and career outcomes.
Standard Hero
A webpage design with a section titled "Targeted to Prospective Students," featuring text about showcasing degree value propositions. Includes a red box with "75" in it and an image of people sitting around a table in a well-lit room.
Homepage Hero
A website interface showing details of a college program. The header includes placeholder text. Below, a list of program attributes like campus location, format, and level are displayed. A scenic view through a window is visible in the background.
Program Hero
A webpage displaying an article layout. On the left, two people sit at a table by large windows showing a city view. On the right, a black section features white text with the headline "Story Headline Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing.
Post Hero

Page Components

These components can be used flexibly on most pages throughout the website.

A webpage section for admissions featuring a heading, brief text on career acceleration through academic coursework, and two dropdown menus labeled "Admissions Dates." A button labeled "Apply Now" is also visible.
Accordion
A thin black banner with white text is displayed across a light gray background. It contains a title, a description, and a link label with a red arrow. There's also an 'X' icon on the right side, possibly indicating a close button.
Alert
Audio player interface with a play button, progress bar, and time stamps. Title reads "Audio Title Lorem Ipsum Dolor Sit Amet Consectetur" with a subtitle "Audio Subtitle Ipsum." Date shown is January 1, 2023.
Audio Player
Two divers in wetsuits wade through rocky, shallow water carrying paddleboards. On the right, there is a text block with a placeholder heading and three labeled links.
Callout
A webpage layout with a heading "Heading for Admissions Lorem Ipsum Dolor" and three sections beneath it. Each section features an image of a street with buildings and a red flag. Below each image is a heading, a text block, and a "Link Label.
Cards
A webpage section titled "Career Outlook" displays a search box, a list of occupations with 2.0% annual growth rates, and options for more details. Occupations are generically labeled, and a disclaimer is at the bottom.
Career Outlook
A simple image with a gray background displaying the word "code" in the center. There is a header "Optional Descriptor" at the top left corner. The overall design is minimalistic.
Code
Chart displaying tuition costs: $52.7K in-state, $74.3K out-of-state, $24.3K average aid. 64% of students receive aid. Includes sections for admissions information, cost details, and available scholarships. Links for more information are present.
Cost Feature
A webpage displaying a list of upcoming events. Each event includes a placeholder title, date, and location. The events are in different colored blocks: black, red, and gray. Text appears as placeholder text with a structured layout.
Events Feed
A webpage section showcasing faculty members. It includes identical cards with placeholder text, featuring a person's photo, name, title, and a brief description. The background shows windows with a view. A heading and a link to learn more are at the top.
Faculty Feature
A black banner with white text on the left reading "Heading for Lifelong Learning Network" and sample descriptive text. On the right, red numbers indicate statistics for jobs, alumni, and employer partners, each with placeholder text.
Fast Facts
A simple form with fields for First Name, Last Name, Email Address, Phone Number, and Country of Residence. It includes a question about interest in receiving information and a red "Submit Form" button at the bottom.
Form
A questionnaire section with dropdown options for areas of interest, study mode, and student type. A red button labeled "View Results" is on the right.
Homepage Questionnaire
A dark webpage section with the text "Optional Eyebrow" at the top. The heading reads "Heading for Admissions Lorem Ipsum Dolor" followed by placeholder text. Two link labels with arrows point to the right, indicating navigation options.
Link List
A meeting in a modern office with large windows showing a city view. A person in a yellow sweater is talking to someone at a table. Text overlays highlight statistics about graduate programs, alumni, and industry partners.
Location Feature
A group of people sitting around a table in a modern room with large windows. Outside, a cityscape is visible. A video play button is at the center, suggesting a video is embedded on the page.
Media with Caption
A webpage layout displaying a heading for featured stories. It features three identical images of a person using a laptop at a table. Each image is accompanied by placeholder text and dates, surrounded by a minimalistic design.
Posts Feed
A comparison chart displaying four black cards at the top with white text. Below, each section lists details like project management, custom domain, and storage options, with red buttons labeled "Select" at the bottom of each column.
Program Comparison
A comparison interface showing "Compare Programs" with four listed items labeled "Program Title." Each item has a close (X) button. There are options to "Compare" or "Remove All and Close" at the bottom.
Program Comparison Drawer
A webpage featuring a program listing with three entries: Nursing & Psychiatric Mental Health Nurse Practitioner, Health Sciences, and Public Health & Public Policy. Each has options to compare and save programs.
Program Listing
A website page with a program overview section. It includes a heading, placeholder text, and a red "Apply Now" button. Below are two dropdown menus labeled "Admissions Dates.
Program Overview
Two scuba divers walk out of the water carrying gear. Beside them, a red section features a placeholder quote and text, with links to read a story and related content.
Quote
A search results page displaying "Lorem ipsum dolar" with multiple entries. Each result includes a title in red and a brief description in gray text. Pagination controls are at the bottom with numbers and navigation arrows.
Search Results
A collage of six images showing people in outdoor gear by the sea, handling fishing equipment and nets on rocky terrain. The background features a calm ocean. The grid layout is part of an Instagram feed with text headings.
Social Feed
A table with a black and red header displaying four columns labeled "Column." Each row contains "$36,303" entries, with the last column showing the date "May 30, 2025." A "Link" is at the top right corner.
Table
A grid layout with six video placeholders displayed on a webpage. Each placeholder has a red play button icon, and "Video Headline Lorem Ipsum" text is beneath each video. The heading above the grid reads "Video grid headline lorem ipsum.
Video Feed
Screenshot of a webpage with the text "The quick brown fox jumps" as a heading. There is a paragraph of placeholder text, a quote block, and three columns with labeled content. Links labeled "Link Label A" and "Link Label B" are at the bottom.
WYSIWYG