Carnegie Mellon Web Kit › Components

Find the Right Component

Page layouts, content blocks and app controls, with live examples and markup you can use in your own project.

Each one is labeled with what it needs:

Template is built into CMU's template, with nothing else to load.
CMS needs cmu-cms.css. It works on any page built on the template, in Cascade, another CMS or an app.
App needs cmu-app.css too, and cmu-app on <body>.
Script also needs cmu-app.js.

Page Tops An eyebrow, a lead and buttons, and heroes. See Page Tops Page Sections Full-width bands: cards, features, carousels, timelines, testimonials. See Page Sections Content Buttons, steps, callouts, pills, code, email links, countdowns and icons. See Content Sidebars Gray and colored boxes, a button box, quick links and On This Page. See Sidebars Lists and Tables Search, filters, tables, files, Load More and pagination. See Lists and Tables Forms Fields, choice rows, a question card, matching, sorting and a card sort. See Forms Messages and Progress Flash messages, dialogs, error pages and progress. See Messages and Progress People Team and leadership grids, contact cards, bios and people lists. See People News and Events The news grid, event lists, events.cmu.edu and event cards. See News and Events Accounts Your name and photo in the header, signing in, preferences, no access and acting as someone else. See Accounts

All Components

Search by name, what it needs, page or class.

			Classes
Account Status	App	Accounts	`cmu-account`, `cmu-account-open`, `cmu-account-menu`, `cmu-account-name`
Acting as Another User	App	Accounts	`cmu-acting-as`, `cmu-acting-bar`
Annotated Image	CMS	Page Sections	`cmu-annotated`, `cmu-annotated-text`, `cmu-annotated-notes`, `cmu-annotated--wide`, `--cmu-at`, `cmu-callout`
Announcements	Template	Page Sections	`content wide`, `darkgrey invert`, `gold`, `green invert`, `blue invert`
Background Patterns	Template	Page Sections	`globe`, `plaid`
Big Buttons	Template	Page Sections	`grid column2`, `btn wide`, `aligncenter`
Bio Page	Template	People	`floatleft caption thumb`, `contact`, `address`
Breadcrumbs	Template	Page Layout
Bullet and Check Lists	CMS	Content	`ul`, `ul.cmu-checks`
Button Box	Template	Sidebars	`sidebar`, `red invert`, `simple`, `btn wide`, `ghost`
Button With a Note	App	Content	`cmu-button-note`, `cmu-hint`
Buttons and Links	Template	Content	`btn`, `ghost`, `small`, `wide`, `cta`, `external`
Callout and Note	CMS	Content	`cmu-callout`, `cmu-label`, `cmu-callout--blue`, `cmu-callout--green`, `cmu-callout--gold`, `cmu-callout--red`, `cmu-note`
Card Sort	App	Forms	`cmu-card-sort`
Cards on Gray	CMS	Page Sections	`grid`, `column2`, `column3`, `column4`, `boxes`, `cmu-grid-full`
Carousel	Template	Page Sections	`js-flickityCustom`, `grid column2`
Choice Rows	App	Forms	`cmu-choices`
Circle Photos	Template	Page Sections	`circle`, `grid column2`
Code Block	CMS	Content	`pre.cmu-snippet`
Contact Cards	Template	People	`grid column3 grey boxes`, `rule-bottom`, `data-cmu-email`
Content and Sidebar	Template	Page Layout
Copy Button	CMS, Script	Content	`data-cmu-copy`, `cmu-copyable`, `cmu-copy`, `cmu-snippet`, `cmu-copy-row`, `btn`
Countdown	CMS, Script	Content	`cmu-countdown`, `data-cmu-countdown`, `cmu-countdown-done`, `cmu-countdown--replace`
Date Blocks and Event Cards	CMS	News and Events	`cmu-date`, `cmu-date-month`, `cmu-date-day`, `cmu-date--red`, `cmu-event-cards`
Dialog and File Drop Zone	App	Messages and Progress	`cmu-dialog`, `cmu-dialog-buttons`, `cmu-drop`, `cmu-drop-pick`, `cmu-drop-file`
Email Links	Script	Content	`data-cmu-email`
Embedded Page	CMS	Content	`cmu-embed`
Enlarge on Click	CMS, Script	Content	`data-cmu-zoom`, `cmu-zoom`
Error Pages	CMS	Messages and Progress	`cmu-lead`, `cmu-cta-row`, `cmu-muted`
Event List	Template	News and Events	`events`
Events From events.cmu.edu	Template	News and Events
Eyebrow, Lead and Call-to-Action Row	CMS	Page Tops	`cmu-eyebrow`, `cmu-lead`, `cmu-cta-row`, `cmu-cta-note`
FAQ	Template	Content	`collapsed`
FAQ Teaser	CMS	Page Sections	`cmu-faq-teaser`
Feature Section	Template	Page Sections	`grid column2 red invert`, `btn ghost`
Fields in a Row	App	Forms	`cmu-field-row`, `cmu-field-row--short`, `cmu-hint`
File Table	CMS	Lists and Tables	`table.alternate`, `cmu-full`
Filters	App	Lists and Tables	`cmu-filters`, `cmu-filter-group`, `cmu-filter-checks`
Flash Messages	App	Messages and Progress	`cmu-flash`, `cmu-flash--success`, `cmu-flash--notice`, `cmu-flash--error`
Folded Lists	App	Lists and Tables	`cmu-more`, `cmu-more-link`, `cmu-more-closed`, `cmu-more-open`
Full-Width Photo Hero	Template	Page Tops	`hero`, `text`, `box left`, `box right`
How It Works	CMS	Page Sections	`ol.cmu-flow`
I Want To…	Template	Page Sections	`grid column3 boxes`, `<h2>`
Icons	Template	Content	`bi`, `bi-`, `floatright`
Leadership Grid	Template	People	`grid column3 grey boxes`, `aligncenter`
Link Bank	Template	Page Sections	`grid column3 red invert nav`, `nav-list`
Link Button	App	Content	`cmu-link-button`
Load More	App	Lists and Tables	`cmu-results-count`, `cmu-load-more`
Matching	App	Forms	`cmu-match`
Navigation	Template	Page Layout
News Grid	Template	News and Events	`section-id`, `grid column3 news`, `grey`, `plaid`, `filterable`, `img`, `hide`, `loadmore`
No Access	App	Accounts
Numbered Steps	CMS	Content	`ol.cmu-steps`
On This Page	Template	Sidebars	`list left-rule`, `#id`
Options Under a Choice	App	Forms	`cmu-sub-options`
Page Setup and Forms	App	Forms	`body.cmu-app`, `body.cmu-framed`
Pagination	App	Lists and Tables	`cmu-results-count`, `cmu-pager`
Panels for Framed Pages	App	Page Layout	`cmu-panel`, `cmu-panel-header`, `cmu-panel-body`, `cmu-panel-footer`
Path Cards	CMS	Page Sections	`cmu-paths`, `cmu-paths--two`, `cmu-path`
People List	App	People	`cmu-people`, `cmu-search-bar`, `cmu-results-count`
Photo Captions and Credits	Template	Content	`figure.image`, `figcaption`, `floatright`, `floatleft`
Photo Grid	Template	Page Sections	`grid`, `column2`, `column3`, `column4`, `photos`, `photo`
Pills	CMS	Content	`cmu-pill`, `cmu-pill--green`, `cmu-pill--amber`
Preferences	App	Accounts
Profile Picture	App	Accounts	`cmu-avatar`
Progress Bars	App	Messages and Progress	`cmu-stat`, `cmu-stat-value`, `cmu-stat-sub`, `cmu-meter`, `cmu-pct`, `--high`, `--mid`, `--low`, `cmu-breakdown`
Progress Through Steps	App	Messages and Progress	`cmu-outline`, `cmu-outline-done`, `cmu-outline-current`, `cmu-meter--full`
Question Card	App	Forms	`cmu-question`, `cmu-question-buttons`, `cmu-question-back`, `cmu-choices`
Quick Links	Template	Sidebars	`list left-rule`, `darkgrey invert`, `rule-bottom`, `cta`
Screenshots	CMS	Content	`figure.cmu-shot`, `cmu-shot--browser`
Search	App	Lists and Tables	`cmu-search-bar`, `sr-only`
Search	Template	Page Layout
Section Bar	Template	Page Sections	`content wide`, `red invert globe`
Section Headings With a Line	Template	Page Sections	`rule-top`, `rule-bottom`
Sidebar Boxes	Template	Sidebars	`sidebar`, `simple`, `left-rule`, `list`, `invert`
Sign In	Template	Accounts	`sidebar`, `simple`, `btn ghost wide`, `red invert`, `left-rule`
Site Name	Template	Page Layout
Small Text	App	Content	`cmu-muted`, `cmu-hint`, `cmu-empty`, `cmu-code`, `cmu-label`
Sorting	App, Script	Forms	`cmu-sort`, `data-cmu-sort`
Split Hero	CMS, Script	Page Tops	`cmu-hero`, `cmu-hero-art`, `cmu-hero-art--stack`, `cmu-hero-art--plain`
Tables	CMS	Lists and Tables	`table.cmu-full`, `table.cmu-compare`
Tables With Actions	App	Lists and Tables	`cmu-bulk-bar`, `cmu-selection-count`, `cmu-has-selection`, `cmu-select-cell`, `cmu-sort`, `cmu-sort-arrow`, `cmu-fit`, `cmu-row-buttons`, `num`
Tabs	App	Page Layout	`cmu-tabs`, `cmu-tabs-more`
Team Grid	Template	People	`grid column4 boxes`, `cta`
Testimonial	CMS	Page Sections	`cmu-testimonial`, `cmu-lightgrey`
Text With a Screenshot	CMS	Page Sections	`cmu-split`, `figure.cmu-shot`, `cmu-shot--browser`
Timeline Cards	Template	Page Sections	`grid column4 darkgreen boxes`, `floatright`, `aligncenter`, `bi`
Videos	Template	Content	`iframe`, `grid column2 grey`