The Article Hero

The block at the top of this page is the Article Hero Module: the full-width image, the title, the subtitle and the byline. It is running live at the top while this page explains it.

What it is for

The Article Hero Module opens a blog post with a big image and carries the page’s main heading. It goes right at the top, and each page uses it only once.

You don’t build a separate version for phones. On a wide screen the image fills the window and the white title box slides in as the reader scrolls. On a narrow screen the image takes the full width at its own height, and everything stacks. The same markup handles both.

How to use it

Copy the block below into your page, right under the site header, and fill it in. You don’t touch any layout or styling – the module brings its own. That includes turning the site-header links white so they stay readable over the image.

• Replace each [[placeholder]] with your own text: the title, the subtitle, the author name and the category.
• Point the image src at your file and describe the image in alt. Fill in width and height with the image’s real pixel size, so the page doesn’t jump while the image loads.
• Keep fetchpriority="high" on the image. It is the first thing the reader sees, so the browser should load it first.
• Set the two link href attributes to your author page and your category page.

The source

This is the whole module, with placeholders where your content goes:

<div class="module-article-hero">
  <header>
    <img class="module-article-hero-article-featured-image"
         src=""
         alt=""
         width="" height=""
         fetchpriority="">
    <h1 class="module-article-hero-article-title">[[article-title]]</h1>
    <p class="module-article-hero-article-subtitle">[[article-subtitle]]</p>
    <div class="module-article-hero-meta">by <a class="module-article-hero-article-author" href="">[[article-author]]</a> in <a class="module-article-hero-article-category" href="">[[article-category]]</a></div>
  </header>
</div>

The <header> has no styling of its own. It just marks the image, title and byline as the head of the article. The full-screen image, the white box and the white header links all come from the module’s own classes.