Article header

The article header pattern should be used at the top of the main content for a news article or blog post.

Rules for article header

  • Must only be used once on a page.
  • Photographs should be headshots of the individual named as the author and of professional quality.
  • Images should be cropped square at 100px wide and 100px high.

Options available


Article header

The simplest implementation incorporates a heading and the date of publication.

Example

Designing web pages for users of screen readers

Wednesday 31 September 2018
Code
<!-- Begin pattern: article-header //-->
<div class="article-header">
    <h1 class="article-header__heading page-heading">Designing web pages for users of screen readers</h1>
    <div class="article-header__meta">
        <div class="article-header__meta--group">
            <div class="article-header__meta-date">Wednesday 31 September 2018</div>
        </div>
</div>
</div>
<!-- End pattern: article-header //-->

Article header with author's name

Adding the name of the author to an article gives it a personal touch and sense of authority.

Example

Designing web pages for users of screen readers

Sophia Adams
Wednesday 31 September 2018
Code
<!-- Begin pattern: article-header //-->
<div class="article-header">
    <h1 class="article-header__heading page-heading">Designing web pages for users of screen readers</h1>
    <div class="article-header__meta">
        <div class="article-header__meta--group">
            <div class="article-header__meta-author">Sophia Adams</div>
            <div class="article-header__meta-date">Wednesday 31 September 2018</div>
        </div>
</div>
</div>
<!-- End pattern: article-header //-->

Article header with linked author's name

The author's name can link to further details about the person.

Example

Designing web pages for users of screen readers

Sophia Adams
Wednesday 31 September 2018
Code
<!-- Begin pattern: article-header //-->
<div class="article-header">
    <h1 class="article-header__heading page-heading">Designing web pages for users of screen readers</h1>
    <div class="article-header__meta">
        <div class="article-header__meta--group">
            <div class="article-header__meta-author"><a href="#">Sophia Adams</a></div>
            <div class="article-header__meta-date">Wednesday 31 September 2018</div>
        </div>
</div>
</div>
<!-- End pattern: article-header //-->

Article header with author's name and image

Using a photograph of the author adds a sense of authenticity and trust to the article.

Example

Designing web pages for users of screen readers

Sophia Adams
Sophia Adams
Wednesday 31 September 2018
Code
<!-- Begin pattern: article-header //-->
<div class="article-header">
    <h1 class="article-header__heading page-heading">Designing web pages for users of screen readers</h1>
    <div class="article-header__meta">
        <div class="article-header__meta-image"><img src="../../assets/docs/images/profile-pictures/female-001-small.jpg" alt="Sophia Adams"></div>
        <div class="article-header__meta--group">
            <div class="article-header__meta-author">Sophia Adams</div>
            <div class="article-header__meta-date">Wednesday 31 September 2018</div>
        </div>
</div>
</div>
<!-- End pattern: article-header //-->

Article header with linked author's name and image

  • If linking to further details about the author, then both the image and name must be links.
Example

Designing web pages for users of screen readers

Sophia Adams
Sophia Adams
Wednesday 31 September 2018
Code
<!-- Begin pattern: article-header //-->
<div class="article-header">
    <h1 class="article-header__heading page-heading">Designing web pages for users of screen readers</h1>
    <div class="article-header__meta">
        <a class="article-header__meta-image" href="" tabindex="-1"><img src="../../assets/docs/images/profile-pictures/female-001-small.jpg" alt="Sophia Adams"></a>
        <div class="article-header__meta--group">
            <div class="article-header__meta-author"><a href="#">Sophia Adams</a></div>
            <div class="article-header__meta-date">Wednesday 31 September 2018</div>
        </div>
</div>
</div>
<!-- End pattern: article-header //-->

Article header with sharing options

The share options pattern can be uncluded to provide a quick method for people to share the article.

Example
Code
<!-- Begin pattern: article-header //-->
<div class="article-header">
    <h1 class="article-header__heading page-heading">Designing web pages for users of screen readers</h1>
    <div class="article-header__meta">
        <a class="article-header__meta-image" href="" tabindex="-1"><img src="../../assets/docs/images/profile-pictures/female-001-small.jpg" alt="Sophia Adams"></a>
        <div class="article-header__meta--group">
            <div class="article-header__meta-author"><a href="#">Sophia Adams</a></div>
            <div class="article-header__meta-date">Wednesday 31 September 2018</div>
        </div>
           <div class="article-header__meta-share">
               <!-- Begin pattern: share-options //-->
               <div class="share-options">
                       <ul>
                           <li ><a href="#"><span class="sr-only">Share this with Facebook</span><i class="fab fa-facebook-square fa-2x" title="Share this with Facebook" aria-hidden="true"></i></a></li>
                           <li ><a href="#"><span class="sr-only">Share this with Twitter</span><i class="fab fa-twitter-square fa-2x" title="Share this with Twitter" aria-hidden="true"></i></a></li>
                           <li ><a href="#"><span class="sr-only">Share this with Facebook Messenger</span><i class="fab fa-facebook-messenger fa-2x" title="Share this with Facebook Messenger" aria-hidden="true"></i></a></li>
                           <li ><a href="#"><span class="sr-only">Share this with LinkedIn</span><i class="fab fa-linkedin fa-2x" title="Share this with LinkedIn" aria-hidden="true"></i></a></li>
                           <li  class="visible-xs"><a href="#"><span class="sr-only">Share this with WhatsApp</span><i class="fab fa-whatsapp fa-2x" title="Share this with WhatsApp" aria-hidden="true"></i></a></li>
                           <li ><a href="#"><span class="sr-only">Share this with Email</span><i class="fas fa-envelope-square fa-2x" title="Share this with Email" aria-hidden="true"></i></a></li>
                       </ul>
               </div>
               <!-- End pattern: share-options //-->           </div>
</div>
</div>
<!-- End pattern: article-header //-->