- Taxonomic name: M-AUTHOR-BOX
- Extension: LONG-FORM-ARTICLE
- Current owner: Framework
- Added on: v5.1.0 (03/11/20)
- Updated on: v5.6.0 (20/04/21)
Author and contributor box
Promotes individual members of the editorial team, writers and contributors, giving recognition regarding their work within a long form artice page.
Design and usage
Structure
Mandatory elements
- Date: in long format (eg. 26 Februrary 2020)
- Reading time (eg. 20 minutes)
-
Author
- Label with keyline
- Profile photo or default back to generic avatar. Please use a professional avatar profile headshot, shot on a neutral background.
- Name (first name and last name), linking to their profile/biography card within the current website.
- Job title.
- LinkedIn or Twitter social media handle.
Optional elements
-
Contributor
- Label with keyline
- Name (first name and last name)
Labels
- The 'Author' and 'Contributor' titles should be made singular or plural as appropriate
Accessibility and screen readers
- Colour contrast and typography WCAG compliant
- Ability to disable parallax effects
Non-js requirements and considerations
- Fixed in place without parallax animation
Placement
- The component overlays the hero component and peaks from the baseline of the browser viewport on desktop, tablet and mobile
Use case and exception scenarios
- Designed exclusively for the long-form article template page
Design anatomy
- There are predominantly two themes for the component – light (Base grey #EEE) and dark (Dark grey #444). Either can be selected and implemented; however, it is advised to choose a theme which compliments the hero image.
Desktop
- Container: 6 or 8 columns wide depending on content
-
Content:
- Authors: 5 columns wide
- Contributors: 2 columns wide
- Only the top part of the author and contribution box is visible. The maximum fixed visual height from the hero baseline is 130 pixels. This will allow enough space for the text lock-up about to scroll freely without colliding into the author and contribution box.
- Fixed to the left side of the content area
Tablet
- Container: full browser width
-
Content:
- Authors: 6 columns wide
- Contributors: 6 columns wide
- Approximately 20% of the author and contribution box showing from the baseline of the screen.
Mobile
- Container: full browser width
-
Content:
- Authors: 4 columns wide
- Contributors: 4 columns wide
- Author's name, job title and social handle sit below the profile photo/avatar
- Approximately 20% of the author and contribution box showing from the baseline of the screen.
Examples
Author box with no contributors
Interactive example
Code example
<div class="m-author-box [ t-accent classes ]">
<div class="m-author-box__details">
<p class="m-author-box__date">...</p>
<p class="m-author-box__read-time" itemprop="timeRequired" content="...">...</p>
<meta itemprop="datePublished" content="..." />
<meta itemprop="dateModified" content="..." />
</div>
<div class="m-author-box-authors">
<h2>Authors</h2>
<ul>
<li class="m-author-box-author" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
<div class="m-author-box-author__picture">
<img src="..." itemprop="image" decoding="async" width="44" height="44" alt="" />
</div>
<p class="m-author-box-author__name"><a href="..."><span itemprop="name">...</span></a></p>
<p class="m-author-box-author__details"><span itemprop="jobTitle">...</span> <a href="..." rel="external" title="External site - [ site domain ]" >...</a></p>
</li>
...
</ul>
</div>
</div>Author box with contributors
This example also demonstrates the generic fallback image and the generic aviva icon available if required.
Interactive example
Code example
<div class="m-author-box [ t-accent classes ]">
<div class="m-author-box__details">
<p class="m-author-box__date">...</p>
<p class="m-author-box__read-time" itemprop="timeRequired" content="...">...</p>
<meta itemprop="datePublished" content="..." />
<meta itemprop="dateModified" content="..." />
</div>
<div class="m-author-box-authors">
<h2>Authors</h2>
<ul>
<li class="m-author-box-author" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
<div class="m-author-box-author__picture">
<img src="..." itemprop="image" decoding="async" width="44" height="44" alt="" />
</div>
<p class="m-author-box-author__name"><a href="..."><span itemprop="name">...</span></a></p>
<p class="m-author-box-author__details"><span itemprop="jobTitle">...</span> <a href="..." rel="external" title="External site - [ site domain ]" >...</a></p>
</li>
...
</ul>
</div>
<div class="m-author-box-contributors">
<h2>Contributors</h2>
<ul>
<li itemprop="contributor" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name">...</span></li>
...
</ul>
</div>
</div>Development and test
Notes for developers
The image element for the author photo must be provided. If no appropriate author photo is available there is a generic and aviva icon available for use within the icon library.
| Path | Image |
|---|---|
/assets/themes-icons/v2/[ organisation ]/[ theme name ]/functional/articles/author-generic.svg |
 |
/assets/themes-icons/v2/[ organisation ]/[ theme name ]/functional/articles/author-aviva.svg |
 |
Extension component
This component forms part of the 'long-form-article' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/long-form-article.css" rel="stylesheet" />Notes for testers
- Ensure that all external links have an approprite title attribute to inform users that the link will take them away from this site.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-author-box |
Container for author and contributor information | Yes | div |
Should either have 't-accent-light t-accent-light--3' or 't-accent-dark t-accent-dark--8' applied |
.m-author-box__details |
Wrapper for the date and read time for the article | Yes | .m-author-box > div |
|
.m-author-box__date |
Style for publication date | Yes | .m-author-box__details > p |
|
.m-author-box__read-time |
Style for read time | Yes | .m-author-box__date + p |
|
.m-author-box-authors |
Wrapper for the authors area | Yes | .m-author-box__details + div |
|
.m-author-box-author |
Style for a single authors details | Yes | .m-author-box-authors > ul > li |
|
.m-author-box-author__picture |
Style for author picture | Yes | .m-author-box-author > div |
Should contain an img element with the authors profile photo |
.m-author-box-author__name |
Style authors name | Yes | .m-author-box-author__picture + p |
|
.m-author-box-author__details |
Style authors job title and social handle link | Yes | .m-author-box-author__name + p |
|
.m-author-box-contributors |
Wrapper for the contriutors area | Yes | .m-author-box-authors + div |
The contributors area itself is optional |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.
Component releases
- Added on: v5.1.0 (03/11/20)
- Updated on: v5.6.0 (20/04/21)
Latest update:
- updated: To improve page load and layout times the additional attributes decoding="async", width and height must be set on all inline images.