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 72px wide and 72px 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
Wednesday 31 September 2018
Code
Designing web pages for users of screen readers
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
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 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
Wednesday 31 September 2018
Code
Designing web pages for users of screen readers
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
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