Page Sections

The full-width bands a page is made of: cards, path cards, features, carousels, timelines, testimonials and more.

Stacking Sections Template

A page can be a run of full-width sections, one after another: a .content block, a grid, a section bar, another grid. On a real page they go straight inside #content, not inside one another; the examples below sit in boxes only to show them here. In Cascade, each is a content section of its own (Content, Grid, Slideshow or Wide).

<main id="content">
  <div class="breadcrumbs"> … </div>
  <div class="content"> … </div>
  <div class="grid column2 red invert"> … </div>
  <div class="grid column2 grey boxes"> … </div>
  <div class="content wide red invert globe"> … </div>
  <div class="grid column2"> … </div>
</main>

Each section's heading is an <h1>, and headings inside a section (a card, a sub-topic) are <h2> and below. That holds for every section, including the first one after a hero: the hero's tagline is an <h1> too, and stays the biggest heading on the page. Pick levels by what a heading contains, never by where it falls on the page; screen reader users skim a page by its heading levels.

Section Headings With a Line Template

Add the template's rule-top to a heading or eyebrow to mark a new section with a thin line above it. Spacing is automatic. The line is hidden right after a band with a background color and turns white on a band with invert. Use rule-bottom for a line below a heading, as in the sidebar.

rule-top, rule-bottom

Cards on Gray CMS

A grid is two, three or four columns that stack on phones. With grey boxes, each column is a white card on a gray band. An <h1> first in the grid is the band's heading, across the top. Keep the cards short, each leading somewhere. For a line across the band's full width, such as an introduction under the heading or a link to see more after the cards, use <p class="cmu-grid-full"> (the kit's only addition here). For which color to use, see Colors.

When the cards' pictures differ in height, add cmu-cards-bottom to the grid: each card's heading, words and link sit at its bottom, lined up across the row, and the picture is centered in the space above.

grid, column2, column3, column4, boxes, cmu-grid-full, cmu-cards-bottom

With cmu-cards-bottom, for pictures of different heights:

Path Cards CMS

Whole-card links that send each audience to its own page. They fit as many columns as the width allows; cmu-paths--two keeps a pair side by side. The call-to-action line (cta) is the template's own.

cmu-paths, cmu-paths--two, cmu-path

How It Works CMS

A process in a few numbered columns, for an overview. For instructions people follow, use numbered steps instead.

ol.cmu-flow

I Want To… Template

The same grid without a color: white boxes with a thin border on the page's own background, headed by what people come to do. Here each box's title is the link, in the template's red, instead of a call to action (cta) under the text. Use linked titles when the title says it all, and a call to action when the action needs its own words. Phrase the titles as the end of the heading's sentence: "I want to… Borrow a Camera."

grid column3 boxes, a linked <h2>

Feature Section Template

A red band with a picture on one side and a heading, a few sentences and a button on the other, to make one thing stand out on a page. It's a two-column grid in red invert: the first column holds the image. On red, use the white outline button, btn ghost.

grid column2 red invert, btn ghost

Carousel Template

Feature sections that slide, with arrows at the sides and a dot for each slide. Put two or more grid column2 slides in a js-flickityCustom, and load the template's carousel script after its main one (Cascade adds it for you):

<script src="https://www.cmu.edu/common/standard-v6/js/flickity.pkgd.min.js"></script>

It never moves by itself. Turn off the dots or arrows with data-navDotsVisible="false" or data-navArrowsVisible="false", and stop it going round from the last slide to the first with data-wrapAround="false". On phones the arrows sit over the slides' headings; turn them off there if your headings are long, since people can swipe instead.

Use these sparingly. People rarely look past the first slide, so put the most important one first, and don't put anything people need in a later slide.

js-flickityCustom, grid column2

Default Carousel

Straight on the page, or in a light section without invert, with the template's dark slate dots.

Inverted Carousel

In a section with a dark background color and invert, such as darkgrey invert: every slide takes the color, and the dots turn white.

Scroll Gallery CMSScript

A gallery that moves as you scroll: a few steps of text, each with a screenshot or photo, for showing a set of projects or walking through what a site does. On a wide screen, the text scrolls on the left while the picture stays in place on the right and changes as each step reaches the middle of the window, fading up by default or, with cmu-scroll-gallery--slide, sliding in from the side.

• Each step holds its own figure, so on a phone, or without the script, the steps stack with their pictures in place.
• Keep it to three to five steps, each a heading, a sentence or two and at most one link.
• Pictures the same shape keep the stage from jumping as it changes.

cmu-scroll-gallery, cmu-scroll-gallery--slide, data-cmu-scroll-gallery, cmu-scroll-gallery-step

With cmu-scroll-gallery--slide, the pictures slide in from the side:

Circle Photos Template

Square photos cropped to circles, beside a few paragraphs each. Add circle to the image, use a square photo and alternate which side it's on. A content wide block holding an <hr> separates each pair.

circle, grid column2

Timeline Cards TemplateIcons

The steps of a process in date order, a card for each with a small icon, the step's name and its dates, on a dark band. It's a grid column4 darkgreen boxes (or column3) with an <h1>.

• Each step's name is an <h2>, right after its icon. Names may wrap to two lines. A name can link to its section further down the page; it then shows in the template's link red.
• Choose an icon for each step. Use floatright to place it beside the heading. See Icons for setup and usage.
• Put the icon, name and any text in a <div>, then the rule and the date after it. The kit sets the rule and date at the bottom of each card, and the dates line up across a row.
• The dates go under a rule, bold and centered with aligncenter.
• Keep to the same years in each card, or show the year on every date, so the order is clear at a glance.

grid column4 darkgreen boxes, floatright, aligncenter, bi

Photo Grid Template

Linked photos with a title over each, three or four across. The whole photo is the link. Use column2, column3 or column4; an <h1> first in the grid is its heading, across the full width. Only an <h1> spans the grid: a paragraph inside it becomes one of the cells, so put any sentence about the photos in their titles instead. Use photos that are all the same shape (such as 3:2, at 900 × 600), or the rows come out ragged and the titles don't line up. At four across, keep titles to two or three words, or they wrap; a sentence under the title fits at two or three across. On phones the photos stack. For people, put each name and title over the photo; the name's in the link, so the photo gets empty alt.

No photos yet? Fill the grid with CMU photos from PlaceMellon while you build, and swap in the real ones when they're ready.

grid, column2, column3, column4, photos, photo

Testimonial CMS

A quote from a student, alumnus or colleague, with their name, their role and a square photo beside it. Put it in its own section on a color, such as content wide cmu-lightgrey. On phones the photo goes above the quote.

• Quote real people, with their permission, and keep it to a sentence or two. Quotation marks around the words are optional; the red mark already says it's a quote.
• Put their name in <strong> inside the <cite>, then their role or class on the next line.
• Describe the person in the photo's alt, not the quote. Use a square photo; the kit crops other shapes to a square.

cmu-testimonial, cmu-lightgrey

Text With a Screenshot CMS

Two columns: text on the left, a framed screenshot with a caption on the right. One column below 760px. Add cmu-shot--browser (see Screenshots) to draw the screenshot in a browser window, like the hero's art, as the Gallery does.

cmu-split, figure.cmu-shot, cmu-shot--browser

Annotated Image CMS

A tall image, such as a screenshot of a whole page or a diagram, with callouts beside it. Each callout is pinned next to the part it describes and overlaps the image's edge a little, so people can read it part by part.

• Name each part. Use a callout with a cmu-label title. If a part has its own page, add a call to action linking to it.
• Position each callout. Set --cmu-at to the middle of the part it describes: 0 is the top of the image, 0.5 is halfway down, and 1 is the bottom.
• Keep the introduction short. Put it in the same column as the callouts, with enough room to end above the first one.
• Give longer text more room. Below 50rem (800px), the component stacks the introduction, callouts and image. Add cmu-annotated--wide for longer introductions or callouts; it keeps them stacked until the component has 70rem (1120px) of space.

See How This Guide Uses It

cmu-annotated, cmu-annotated-text, cmu-annotated-notes, cmu-annotated--wide, --cmu-at, cmu-callout

FAQ Teaser CMS

A few common questions and short answers in columns, followed by a link to the full FAQ.

cmu-faq-teaser

Big Buttons Template

Two wide buttons side by side for the two things most people come to do. Each is a btn wide inside an <h2>, which makes its text large.

grid column2, btn wide, aligncenter

Section Bar Template

A full-width colored bar with a heading, to start a new part of a long page, often with the globe. It's a .content wide block with a color; give it an id to link to it.

content wide, red invert globe

For a statement instead of a heading, such as a mission, use a lighter band with the text centered: grey plaid, which the template fades so dark text stays readable. On phones it's plain white, since the template drops the plaid there (see Background Patterns), so don't count on it to set the statement apart.

Announcements Template

A full-width band across the top of a page, right under the breadcrumbs, for something everyone who comes to the page should know first: who the page is for, a deadline, a change. Site authors write it and take it down; it says the same thing to everyone. It's a content wide block in a template color. Keep to one at a time, and a sentence or two.

• Dark gray (darkgrey invert) for who a page is for, with the text in bold.
• Gold for a time-sensitive update, with a bold lead-in. Gold takes dark text and no invert. When the whole notice is one short statement, make it a centered <h3> instead; center it with the template's aligncenter, not an inline style.
• Green (green invert) for something newly available, with a call to action when there's a next step people can take.
• Blue (blue invert) for a note set apart lower on the page, with an <h4> for small bold capitals.
• Not red: A red band reads as a campus alert. And not for the result of something someone just did: that's a flash message. For an aside within a section, such as a tip or a warning, use a callout.

content wide, darkgrey invert, gold, green invert, blue invert

Link Bank Template

Red columns of links at the bottom of a page, to the site's main pages and its neighbors. It's a grid with nav, and each column a nav-list; darkgrey invert works too. Keep it to links: a way into an app goes in the page, not here. A column can start with an <h1>, which shows as a small bold label.

grid column3 red invert nav, nav-list

On This Page Link Bank CMS

Links to the sections of a long page, in columns under its intro, for a page whose content uses the full width, such as wide tables or examples. It's a white link bank with cmu-on-this-page and a cmu-label first: the label takes a row of its own over the columns, and the link bank drops the template's top and bottom padding, which only gives a colored band room. The links stay the page's usual red, so they read as links.

• Not on a page with a sidebar: there, the On This Page box goes at the top of the sidebar.
• Not on a page short enough to see at a glance.

grid column3 nav cmu-on-this-page, cmu-label, nav-list

Background Patterns Template

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 and 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. In Cascade, it's a section's Background Image: Globe or Plaid.

globe, plaid, with a color

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