Page Sections

Full-width sections a page is built from, from the hero at the top to the link bank at the bottom. All from CMU's standard template; nothing here needs the kit.

Page Sections

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 so the page can show them. In Cascade, each is a content section of its own (WYSIWYG, Grid 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>, as on CMU's Cascade pages, 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

An optional thin line over a section's heading, to mark where one topic ends and the next begins on a long page, as on Computing Services' video production page. Add the template's rule-top to the heading. The line sits right on top of the heading; the section's own padding gives the space above it. On a color band (invert) the line turns white. Its partner, rule-bottom, puts the line under a heading instead, as in the sidebar.

rule-top, rule-bottom

Hero

A full-width photo at the top of a page, before the breadcrumbs, as on First-Year Orientation's pages. It's a div.hero with the photo as its background: a 900 × 600 version in style for phones, and a 1400 × 700 version in data-img, which the template's script swaps in on wider screens. Give it role="img" and an aria-label describing the photo. In Cascade, it's the page's Hero. On a page with a hero, the template drops the line under the header's tabs, since the photo sits right below them.

Over the photo, either a line of text in a dark band (div.text, with an <h1> and an optional <h2>), or a white box that links somewhere (a.box, with left or right), as on University Health Services' home page.

hero, text, box left, box right

Several heroes in a section.js-flickityCustom make a slideshow, with the same carousel script. For an app's info site, the kit's hero card with screenshots usually says more than a photo.

Cards on Gray

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. Good for short cards that each lead 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).

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

I Want To…

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, as on CMU's ID+ page. Here each box's title is the link, in the template's red, instead of a cta under the text. Use linked titles when the title says it all, and a cta 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

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, as on CMU's Get Involved page. It's a two-column grid in red invert: the first column holds the image.

grid column2 red invert, btn

Carousel

Feature sections that slide, with arrows at the sides and a dot for each slide, as on CMU's Visit page. 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". A color on the wrapper colors every slide. On phones the arrows sit over the slides' headings; turn them off there if your headings are long, since people can swipe instead.

Use it sparingly: people rarely look past the first slide, so put the most important one first, and never hide something people need in a later slide.

js-flickityCustom, grid column2

Circle Photos

Square photos cropped to circles, beside a few paragraphs each, as on First-Year Orientation's schedule. 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

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, as on Human Resources' performance management page. It's a grid column4 darkgreen boxes (or column3) with an <h1>. Each step's name can link to its section further down the page.

• The icon goes before the name, with the template's floatright. Use a Bootstrap Icon with aria-hidden="true", which the kit sizes and colors to fit the card, or a small image with empty alt text. Either way, the name says it all.
• The dates go under a rule, bold and centered with aligncenter. Write ranges with a hyphen and no spaces, as AP does: May 4-July 10.
• 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

Linked photos with a title over each, as on the HUB's Academic Calendar (three across) and Family Programs' Parents page (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 (the HUB's are 3:2, such as 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.

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

Big Buttons

Two wide buttons side by side for the two things most people come to do, as at the top of Dining Services' home page. Each is a btn wide inside an <h2>, which makes its text large.

grid column2, btn wide, aligncenter

Section Bar

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 rather than a heading, such as a mission, use a lighter band with the text centered, as on the Tartan Bike Project's page: 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 Globe and Plaid), so don't count on it to set the statement apart.

Announcements

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, as on Stellic's page for staff and faculty.
• Gold for a time-sensitive update, with a bold lead-in, as on CMU's Visit page. Gold takes dark text, so it needs no invert. When the whole notice is one short statement, make it a centered <h3> instead, as on the Tartan Bike Project's page; center it with the template's aligncenter, not an inline style.
• Blue (blue invert) for a note set apart lower on the page, with an <h4> for small bold capitals, as on the HUB's Academic Calendar.
• 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, blue invert

Link Bank

Red columns of links at the bottom of a page, to the site's main pages and its neighbors, as on the HUB. It's a grid with nav, and each column a nav-list; darkgrey invert works too, as on the ID+ pages. 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