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

Designing web pages for users of screen readers

Wednesday 31 September 2018

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

Designing web pages for users of screen readers

Sophia Adams
Wednesday 31 September 2018

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

Designing web pages for users of screen readers

Sophia Adams
Wednesday 31 September 2018

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

Designing web pages for users of screen readers

Sophia Adams
Sophia Adams
Wednesday 31 September 2018

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

Designing web pages for users of screen readers

Sophia Adams
Sophia Adams
Wednesday 31 September 2018

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

Designing web pages for users of screen readers

Sophia Adams
Sophia Adams
Wednesday 31 September 2018