SF Fed Blog Archive Template

A one-column page used for SF Fed's blog archive page, which lists links to blog entries.

Resize window to see mobile.

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

  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

    Connect the page to parent via a headcrumb, containing it in <header class="section-header">; and wrapping the link in <h4> and <a id="page-title-ourdistrict-about">.

  3. Main body

    Define body content with a wrapper <main id="main" class="m-all t-all d-all cf" role="main">. Define inner wrapper with <article role="article" class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">. This functions as desktop and tablet layout.

  4. Social links

    Create a container with <div id="share-links"> and call appropriate icons and links, following the order seen here.

  5. Header

    Use straight <h1> for blog title.

  6. Blog post link and post date

    Code the template to pull blog posts in descending order by date. Then, style the title link with <h1 class="h5">; and the date with <p class="meta date">.

  7. Hero image

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

  8. Blog post teaser

    Use <div> for teaser and add a "Read more" link at the end.