Carnegie Mellon Web Kilt › Components

Find the Right Component

Page layouts, content blocks and app controls. Each one has a live example and markup you can use in your own project.

Each component is labeled with one of Template, CMS or App, and some are also labeled Script or Icons. The labels indicate what to install:

Template Built into CMU's original, unmodified template stylesheet and scripts. Cascade includes them; app developers need to add them.
CMS Component requires cmu-cms.css. Note that cmu-cms.css depends on CMU's template.
App Component requires cmu-app.css and the cmu-app class on <body>. Note that cmu-app.css depends on cmu-cms.css, which depends on CMU's template.
Script Component requires cmu-app.js. Note that the script does not replace the stylesheets required by the CMS or App label. CMS and Script means cmu-cms.css and cmu-app.js, on top of CMU's template, without necessarily requiring cmu-app.css.
Icons Component requires bootstrap-icons.min.css, from Bootstrap Icons, an optional library that isn't part of the kit. Note that it loads after the kit's stylesheets.

Install the Kit

Page Tops Heroes: a split hero, a full-width photo and a silent video. 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 Link Previews The title, sentence and picture a shared link shows, in a CMS or an app. See Link Previews 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 Lists and Tables Search, filters, tables, files, Load More and pagination. See Lists and Tables Forms Fields, choice rows, a question card, matching, sorting, a card sort and an ID tap. See Forms Messages and Progress Flash messages, dialogs, error pages and progress. See Messages and Progress Accounts The user’s name and photo in the header, signing in, preferences, no access and acting as someone else. See Accounts

All Components

			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`
AI Agent Prompt	AppScript	Content	`cmu-agent`, `cmu-copy`, `cmu-more`
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`, `icon`, `sidebar`, `list grey`
Breadcrumbs	Template	Page Layout	`breadcrumbs`
Bullet, Check and Plain Lists	CMS	Content	`ul`, `ul.cmu-checks`, `ul.cmu-plain`
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`
Call-to-Action Row	CMS	Content	`cmu-cta-row`, `cmu-cta-note`
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`, `cmu-cards-bottom`
Carousel	Template	Page Sections	`js-flickityCustom`, `grid column2`
Choice Grid	App	Forms	`cmu-choices cmu-choices--grid`, `bi`
Choice Rows	App	Forms	`cmu-choices`, `cmu-label`
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	`content`, `wide`, `sidebar`
Copy Button	CMSScript	Content	`data-cmu-copy`, `cmu-copyable`, `cmu-copy`, `cmu-snippet`, `cmu-copy-row`, `btn`
Countdown	CMSScript	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	App	Messages and Progress	`cmu-dialog`, `cmu-dialog-buttons`
Email Links	TemplateScript	Content	`data-cmu-email`
Embedded Page	CMS	Content	`cmu-embed`
Enlarge on Click	CMSScript	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
Examples	CMS	Content	`cmu-example`, `cmu-label`
Eyebrow and Lead	CMS	Content	`cmu-eyebrow`, `cmu-lead`
FAQ	Template	Content	`collapsed`
FAQ Teaser	CMS	Page Sections	`cmu-faq-teaser`
Feature Section	Template	Page Sections	`grid column2 red invert`, `btn ghost`
Field With a Button	App	Forms	`cmu-field-button`
Fields in a Row	App	Forms	`cmu-field-row`, `cmu-field-row--short`, `cmu-hint`
File Drop Zone / Picker	AppScript	Forms	`cmu-drop`, `cmu-drop-pick`, `cmu-drop-file`, `cmu-drop-over`, `cmu-drop-has-file`
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`, `small`, `large`, `caption`, `tall`, `mask`
How It Works	CMS	Page Sections	`ol.cmu-flow`
I Want To…	Template	Page Sections	`grid column3 boxes`, `<h2>`
Icons	TemplateIcons	Content	`bi`, `bi-`, `floatright`
ID Tap / NFC	AppScript	Forms	`cmu-tap-target`, `data-cmu-tap`, `cmu-tap-card`, `cmu-tap-ready`, `cmu-tap-paused`, `cmu-tap-result`, `cmu-tap-other`, `cmu-field-button`
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	`nav#nav`, `active`, `secondary`, `external`
News Grid	Template	News and Events	`section-id`, `grid column3 news`, `grey`, `plaid`, `filterable`, `img`, `hide`, `loadmore`
Numbered Steps	CMS	Content	`ol.cmu-steps`
On This Page	Template	Sidebars	`list simple`, `#id`
On This Page Link Bank	CMS	Page Sections	`grid column3 nav cmu-on-this-page`, `cmu-label`, `nav-list`
Open Graph Tags	Template	Link Previews
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`
Scroll Gallery	CMSScript	Page Sections	`cmu-scroll-gallery`, `cmu-scroll-gallery--slide`, `data-cmu-scroll-gallery`, `cmu-scroll-gallery-step`
Search	App	Lists and Tables	`cmu-search-bar`, `sr-only`
Search Suggestions	AppScript	Forms	`cmu-suggest`, `cmu-suggest-list`
Section Bar	Template	Page Sections	`content wide`, `red invert globe`
Section Headings With a Line	Template	Page Sections	`rule-top`, `rule-bottom`
Short Bios	Template	People	`content`, `grey`, `contact`, `sidebar`, `darkgrey invert`, `list`, `indicia`
Sidebar Boxes	Template	Sidebars	`sidebar`, `simple`, `left-rule`, `list`, `invert`
Sign In	Template	Accounts	`sidebar`, `simple`, `btn ghost wide`, `red invert`, `left-rule`
Silent Video Hero	Template	Page Tops	`hero tubular`, `data-vid`
Site Name	Template	Page Layout	`#sitename`, `sitetitle`
Site Search	Template	Page Layout	`search`, `search-form`, `searchSite`
Small Text	App	Content	`cmu-muted`, `cmu-hint`, `cmu-empty`, `cmu-code`, `cmu-label`
Sorting	AppScript	Forms	`cmu-sort`, `data-cmu-sort`, `cmu-sort-moves`, `data-cmu-move`
Split Hero	CMSScript	Page Tops	`cmu-hero`, `cmu-hero--blue`, `cmu-hero--teal`, `cmu-hero--green`, `cmu-hero--gold`, `cmu-hero-art`, `cmu-hero-art--stack`, `cmu-hero-art--plain`, `cmu-cta-note`
Stacked Bios	Template	People	`floatleft caption thumb`, `cta`, `contact`, `rule-bottom`
Tables	CMS	Lists and Tables	`table.cmu-full`, `table.cmu-compare`
Tables With Actions	AppScript	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`, `cmu-row-menu`, `cmu-row-menu-list`, `data-cmu-menu`, `num`
Tabs	App	Page Layout	`cmu-tabs`, `cmu-tabs-more`, `data-cmu-tabs`, `data-cmu-tab`
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	TemplateIcons	Page Sections	`grid column4 darkgreen boxes`, `floatright`, `aligncenter`, `bi`
Transparent Images	CMS	Content	`cmu-transparent`
Videos	Template	Content	`iframe`, `grid column2 grey`