CMS Components
From cmu-cms.css, for Cascade sites and apps alike. In Cascade, paste the
markup into a content section's Source code view.
Page Tops
What goes at the top of a page: an eyebrow, a lead and buttons, and a hero with
screenshots.
See Page Tops
Content Blocks
Blocks for the body of a page: path cards, how it works, steps, check lists,
callouts, questions, text with a screenshot, code blocks with a copy button,
countdowns and icons.
See Content Blocks
Pills and Tables
Status pills and tables that fit the page.
See Pills and Tables
Home Page for an App's Info Site
An app's Cascade site explains the app and sends people to it. Its home page works best in this order, as on cmu.edu/syllabusregistry:
- Hero: a tagline, one sentence, a button into the app and screenshots.
- Path cards: one per audience (students, instructors, administrators), each leading to its own page.
- How it works: three or four short steps, with a callout under them for the one thing people most need to know.
- Question teasers: the most common questions, linking to the FAQ.
Colors
Use these custom properties in your own stylesheet instead of copying the values, so every site moves together if they change. Each comes from one of three places:
- Brand: CMU's official colors, from brand.cmu.edu, such as Carnegie Red and the Tartan palette's threads.
- Template: the colors cmu.edu's template draws on the web. Some are brand colors exactly; others are a shade darker so text on them stays readable, such as its green, close to Green Thread. The template's own color classes are on CMU Standard.
- Kit: pale tints for backgrounds and dark shades for small text on them, such as the green of a "Syllabus Available" pill. They aren't brand colors: no brand color is pale enough for a background behind text, or dark enough for small text on a tint, in every hue. Use them only for those jobs, and a brand or template color for anything large, such as a band or a bar.
| Property | Value | Used for | Source |
|---|---|---|---|
--cmu-red |
#c41230 | Carnegie Red: accents, step numbers, active tabs, errors | Brand |
--cmu-ink |
#22262a | Body text on tinted backgrounds | Kit |
--cmu-muted |
#5b6670 | Secondary text, labels, captions | Kit |
--cmu-line |
#d9dde1 | Borders and rules | Kit |
--cmu-tint |
#f4f5f6 | Tinted panels: callouts, notes, the bulk bar | Kit |
--cmu-green, --cmu-green-tint |
#1d5a3a, #e3f1ea | Done, available, success: text on its tint. Darker than any brand green, so small text stays readable | Kit |
--cmu-green-fill |
#00853e |
Progress bars: the template's own green (its green bands), close to
CMU's Green Thread
|
Template |
--cmu-amber, --cmu-amber-tint |
#6b4d00, #fff4d6 | Waiting, missing (amber, not red: not an error) | Kit |
--cmu-gold |
#fdb515 | CMU's Gold Thread: the rule on a notice flash | Brand |
--cmu-gray, --cmu-gray-tint |
#4a535b, #eceef0 | Neutral, not applicable | Kit |
--cmu-red-tint |
#fdf2f3 | Error flash background | Kit |