Story pages

The story page uses full-bleed images and scaled-up headings to create highly visual pages that help to tell a narrative or story. The template should be used sparingly for content that needs a more visceral or emotional impact. Reserve the use of story pages for higher-profile initiatives. An example of a story page is the racial equity page.

Standard story page

Story page wireframe Example
Story page example Example: Racial equity

Specs

On desktop, the H1 in the hero is rendered at display heading size while all H2s are bumped up to H1 size (34px / 2.125 ems) from their standard size (26px / 1.625 em). H3s and below render at standard sizes.

Use cases

When to use

  • You want to tell a story or make a statement; and
  • You want the story or statement to have emotional impact that will be enhanced with the use of full-bleed images and large headings; and
  • The page is intended to be fairly high-profile (e.g. a director’s priority page)

When not to use

  • You want to quickly direct readers to specific content on a given topic. Use the sublanding or browse page instead.
  • The content is informational and text-heavy, such as an article or blog post. Use the learn page instead.

Guidelines

Content guidelines

The hero area should contain an H1, without any additional introductory subcopy.

  • 41 characters max (one-line heading)
  • 82 characters max (two-line heading)

H2:

  • Headings should form the narrative backbone of the page - when read together, they should tell a story.

Behavior

Full-bleed images will shrink to fit as the viewport is resized.

Edit page