Find the Right Component

Three sets, from what CMU's template already gives you to what only apps need. Start with the first: use the kit only for what the template doesn't already do.

All Components

Component ▲	Set	Page	Classes
Acting as Another User	App Components	Users	cmu-acting-as, cmu-acting-bar
Announcements	CMU Standard	Page Sections	content wide, darkgrey invert, gold, blue invert
Big Buttons	CMU Standard	Page Sections	grid column2, btn wide, aligncenter
Bio Page	CMU Standard	People	floatleft caption thumb, contact, address, protect
Bullet and Check Lists	CMS Components	Content Blocks	ul, ul.cmu-checks
Button Box	CMU Standard	Sidebars	sidebar, red invert, simple, btn wide, ghost
Button With a Note	App Components	App Components	cmu-button-note, cmu-hint
Buttons and Links	CMU Standard	CMU Standard Components	btn, ghost, small, wide, cta, external
Callout and Note	CMS Components	Content Blocks	cmu-callout, cmu-label, cmu-callout--blue, cmu-callout--green, cmu-callout--gold, cmu-callout--red, cmu-note
Cards on Gray	CMU Standard	Page Sections	grid, column2, column3, column4, boxes, cmu-grid-full
Carousel	CMU Standard	Page Sections	js-flickityCustom, grid column2
Circle Photos	CMU Standard	Page Sections	circle, grid column2
Code Block	CMS Components	Content Blocks	pre.cmu-snippet, cmu-snippet--wrap
Contact Cards	CMU Standard	People	grid column3 grey boxes, rule-bottom, protect
Copy Button	CMS Components	Content Blocks	data-cmu-copy, cmu-copyable, cmu-copy, cmu-snippet, btn
Countdown	CMS Components	Content Blocks	cmu-countdown, data-cmu-countdown
Date Blocks and Event Cards	CMS Components	News and Events	cmu-date, cmu-date-month, cmu-date-day, cmu-date--red
Dialog and File Drop Zone	App Components	Messages and Dialogs	cmu-dialog, cmu-dialog-buttons, cmu-drop, cmu-drop-pick, cmu-drop-file
Embedded Page	CMS Components	Content Blocks	cmu-embed
Event List	CMU Standard	News and Events	events
Events From events.cmu.edu	CMU Standard	News and Events
Eyebrow, Lead and Call-to-Action Row	CMS Components	Page Tops	cmu-eyebrow, cmu-lead, cmu-cta-row, cmu-cta-note
FAQ	CMU Standard	CMU Standard Components	collapsed
Feature Section	CMU Standard	Page Sections	grid column2 red invert, btn
Fields in a Row	App Components	App Components	cmu-field-row, cmu-field-row--short, cmu-hint
File Table	CMU Standard	CMU Standard Components	table.alternate, cmu-full
Filters	App Components	Lists and Tables	cmu-filters, cmu-filter-group, cmu-filter-checks
Flash Messages	App Components	Messages and Dialogs	cmu-flash, cmu-flash--success, cmu-flash--notice, cmu-flash--error
Folded Lists	App Components	Page Structure	cmu-more, cmu-more-link, cmu-more-closed, cmu-more-open
Globe and Plaid	CMU Standard	CMU Standard Components	globe, plaid
Hero	CMU Standard	Page Sections	hero, text, box left, box right
Hero	CMS Components	Page Tops	cmu-hero, cmu-hero-art, cmu-hero-art--stack, cmu-hero-art--plain
How It Works	CMS Components	Content Blocks	ol.cmu-flow
I Want To…	CMU Standard	Page Sections	grid column3 boxes, <h2>
Icons	CMS Components	Content Blocks	bi, bi-, floatright
Leadership Grid	CMU Standard	People	grid column3 grey boxes, aligncenter
Link Bank	CMU Standard	Page Sections	grid column3 red invert nav, nav-list
Link Button	App Components	App Components	cmu-link-button
Load More and Pages	App Components	Lists and Tables	cmu-results-count, cmu-load-more, cmu-pager
News Grid and Load More	CMU Standard	News and Events	section-id, grid column3 news, grey, plaid, filterable, img, hide, loadmore
No Access	App Components	Users
Numbered Steps	CMS Components	Content Blocks	ol.cmu-steps
On This Page	CMU Standard	Sidebars	list left-rule, #id
Options Under a Choice	App Components	App Components	cmu-sub-options
Page Setup and Forms	App Components	App Components	body.cmu-app, body.cmu-framed
Page Title Row	App Components	Page Structure	cmu-page-title
Panels for Framed Pages	App Components	Page Structure	cmu-panel, cmu-panel-header, cmu-panel-body, cmu-panel-footer
Path Cards	CMS Components	Content Blocks	cmu-paths, cmu-paths--two, cmu-path
People List	App Components	Lists and Tables	cmu-people, cmu-search-bar, cmu-results-count
Photo Captions and Credits	CMU Standard	CMU Standard Components	figure.image, figcaption, floatright, floatleft
Photo Grid	CMU Standard	Page Sections	grid, column2, column3, column4, photos, photo
Pills	CMS Components	Pills and Tables	cmu-pill, cmu-pill--green, cmu-pill--amber
Preferences	App Components	Users
Progress	App Components	Messages and Dialogs	cmu-stat, cmu-stat-value, cmu-stat-sub, cmu-meter, cmu-pct, --high, --mid, --low, cmu-breakdown
Question Teasers	CMS Components	Content Blocks	cmu-qa
Quick Links	CMU Standard	Sidebars	list left-rule, darkgrey invert, rule-bottom, cta
Search	App Components	Lists and Tables	cmu-search-bar, sr-only
Section Bar	CMU Standard	Page Sections	content wide, red invert globe
Section Headings With a Line	CMU Standard	Page Sections	rule-top, rule-bottom
Sidebar Boxes	CMU Standard	Sidebars	sidebar, simple, left-rule, list, invert
Sign In	CMU Standard	Sidebars	sidebar, red invert, btn wide, left-rule
Sign In and Sign Out	App Components	Users	cmu-account, cmu-account-open, cmu-account-menu, cmu-account-name
Small Text	App Components	App Components	cmu-muted, cmu-hint, cmu-empty, cmu-code, cmu-label
Tables	CMS Components	Pills and Tables	table.cmu-full, table.cmu-compare
Tables With Actions	App Components	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 Components	Page Structure	cmu-tabs, cmu-tabs-more
Team Grid	CMU Standard	People	grid column4 boxes, cta
Testimonial	CMS Components	Content Blocks	cmu-testimonial, content wide grey
Text With a Screenshot	CMS Components	Content Blocks	cmu-split, figure.cmu-shot, cmu-shot--browser
Timeline Cards	CMU Standard	Page Sections	grid column4 darkgreen boxes, floatright, aligncenter, bi
Videos	CMU Standard	CMU Standard Components	iframe, grid column2 grey