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
Designing web pages for users of screen readers
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
Designing web pages for users of screen readers
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
Designing web pages for users of screen readers
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
Designing web pages for users of screen readers
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
Designing web pages for users of screen readers
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
Designing web pages for users of screen readers