CMU Standard Components

What CMU's standard web template (standard-v6) already has, before you reach for the kit. Every example uses only CMU's own classes; nothing in this section needs the kit.

Buttons and Links

A solid button for the main action on a page, ghost buttons for the rest and a call to action (cta) for a link that should stand out from the text. external marks a link to another site.

btn, ghost, small, wide, cta, external

Use <button class="btn"> for things that happen on the page and <a class="btn"> for things that go somewhere.

Start the text with a verb that says what people will do, in Title Case. Let the action lead; echoing the destination page's heading is nice when it fits, but not required. A button is the page's main action and can go wherever that action happens, such as an app's sign-in or a request form in another system. A call to action is a next step on your own site or app. Any other link to another site is an ordinary external link in sentence case, as in the last row; a link is a cta or external, never both.

Do	Don't
Add Categories, Random Photos and More	Categories, random photos and more
See the Loan Policies	Learn More
Load More Sections	Load More
Upload Syllabus	Syllabus Upload
Browse the code on GitHub	Browse the Code (to GitHub)

Colors

A color class goes on a sidebar box or on a whole grid; boxes inside a grid stay white. Add invert for white text on every color except grey and gold, which take dark text. Keep to one or two colors across a site, and repeat them for the same job, such as red for every sign-in box. Under each class is the brand color it is, from brand.cmu.edu, or "template" where cmu.edu uses its own shade, a little darker so white text on it stays readable. See also the kit's colors.

red, darkgrey, grey, blue, teal, green, darkgreen, gold

<div class="sidebar">
  <div class="teal invert"> … </div>
</div>
<div class="grid column3 blue invert boxes"> … </div>

Globe and Plaid

Two background patterns that go with a color: globe, a faint map, and plaid, the university tartan. Both come from the template's own image files, so they follow the brand rules; never draw your own tartan. Use one for a section bar or a feature section, not behind long text. The template shows them only from 768px up; on phones the color is plain, and grey plaid has no gray at all, so don't count on the pattern to set a section apart.

globe, plaid, with a color

<div class="content wide red invert globe"> … </div>
<div class="grid column3 darkgrey invert plaid"> … </div>

File Table

A list of forms or documents to download, with when each was last changed, as on the HUB's Forms & Documents. Use table.alternate with real column headings, and put the file type after each link in plain text. The HUB puts its links in <h4> headings to make them stand out; don't, since screen readers then announce every row as a heading. A long page of them can go under collapsed headings, as below.

table.alternate, cmu-full

FAQ

Questions that open to show their answers. A heading with collapsed hides everything after it, up to the next collapsed heading, until it's clicked; it needs the template's script. In Cascade, add an Expand/Collapse Section for each question.

collapsed

A long FAQ divides into categories, as on Transportation Services' FAQ. Each category is its own .content block with an id, headed by an <h1> whose text is in a rule-bottom span, so the rule runs under the words. Give each question an id too: a link to it, such as faq.html#miss-turn, opens that answer when the page loads. With more than a few categories, list them in an On This Page box in the first block's sidebar.

Photo Captions and Credits

A photo with a caption under it, as on CMU News stories. Use Cascade's image block, or figure.image with a <figcaption>: the template sets the caption in italics and spaces the figure from the text below. Put floatright or floatleft on the image to set the figure beside the text at half width; on phones it goes full width.

figure.image, figcaption, floatright, floatleft

Credits go at the end of the caption, in parentheses, in the caption's own style; CMU sites don't use a separate credit line or credit class.

• Photos by University Communications & Marketing need no credit.
• Someone else's photo or work: "(Courtesy of Name)" for a photo given to you, or "(Photo: Name)" for a photographer.
• Creative Commons: name the author, link the source and the license, and say if you changed it: "(Photo: Author, CC BY 4.0, cropped)".
• Never put the credit in the alt text. Alt text describes the picture; a screen reader would read the credit as part of it.

Videos

A YouTube video in the page, or beside a few sentences about it on a band, as on Wellbeing's home page. Paste YouTube's embed code (Share, then Embed) and keep its width and height: the template's script fits the video to its column and keeps that shape, on phones too.

• Give it a title that names the video, not "YouTube video player": screen readers announce it for the frame.
• Use youtube-nocookie.com in the address instead of youtube.com, so YouTube doesn't set its tracking cookies until someone plays the video.
• Turn on captions in YouTube, and check them: automatic captions get names and terms wrong.
• Add loading="lazy" so the video loads only when someone scrolls to it.

iframe, grid column2 grey

And More

• Tables: table.alternate for striped rows; see Tables.
• Bio, News and Course pages: Cascade page types with their own layouts and indexes.
• Load More: news and bio indexes show 12 items, then a btn ghost wide Load More button that shows 12 more each time. Cascade writes the markup; you don't. In an app, the kit's Load More matches it.