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.
Designing web pages for users of screen readers
Code
Example
<!-- 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.
Designing web pages for users of screen readers
Code
Example
<!-- 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.
Designing web pages for users of screen readers
Code
Example
<!-- 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.
Designing web pages for users of screen readers
Code
Example
<!-- 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.
Designing web pages for users of screen readers
Code
Example
<!-- 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.
Designing web pages for users of screen readers
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 //-->