Stories Single Template

A one-column page used for single blog posts and stories.

Resize window to see mobile.

page screenshot
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7

  1. Section Header

    Wrap header with <header class="section-header">. Define section further with <h3> and <a id="x">, where x = section header id; color is from section header class. On scroll on desktop and tablet, JavaScript will affix header to top (with Menu and Search). (See scripts.js.)

  2. Headcrumb

    Display the headcrumb nav with a <header class="section-header"> wrapper. Style the link text with h4 and link back to parent page, ensuring href has appropriate <id>, which will also vary depending on parent page.

  3. Title and post date

    Use <h1> for title and straight <p> for post date.

  4. Hero image

    Enclose image in a <img class="blog-hero">; and size the image at 670 x 268.

  5. Social icons and links

    Wrap the social media container in a <div id="share-links">; to house icons and links to appropriate social media sites.

  6. Body

    The template body is an open container with additional pre-templated, optional components.

  7. Related

    Use a <ul> for related links.