Taxonomic name: M-READ-NEXT
Extension: LONG-FORM-ARTICLE
Current owner: Framework
Added on: v5.1.0 (03/11/20)

Read next article

The Read Next Article component allows a user to continue to the next or previous long-form article which may be of interest.

Design and usage

There are only two main themes for the read next article component - light grey and dark grey with white cards - to help avoid cognitive overload and too many interaction patterns for a user to interpret.

Structure

Outer wrapper containing:
- Previous article card with left aligned content containing:
  - Left chevron
  - 'Previous article' heading
  - Article title heading
  - 'Read more' link
- Next article card with right aligned content containing:
  - 'Next article' heading
  - Right chevron
  - Article title heading
  - 'Read more' link
Cards are full with at mobile, and in two columns at tablet and desktop
Cards use standard Framework padding

Headings

Previous and next article headings: h3 regular
Article titles: h3 regular
Read more: standard Framework link style

Accessibility and screen readers

Hover state snaps rather than transitioning

Non-JS requirements and considerations

None other than animations being turned off

Placement

Penultimate item on the page, sitting immediately above the footer

Use case and exception scenarios

Mandatory in long form article pages unless no further articles are available
If only two articles are available, use either the next or previous card as appropriate on each article; the single remaining card will then automatically be positioned as necessary
Normal behaviour for three or more articles

Design notes

For desktop and tablet, the vertical card height is determined by article heading length, but both cards should be the same height
'Read more' link aligns to the bottom of the card
The entire card is selectable and follows the Framework navigation card hover / interaction style
Two background colour options for the outer container: Light Grey (#eee) and Dark Grey (#444); the cards themselves should always be white with standard heading and link text colours

Examples

Interactive example

Code example

<div class="l-section l-section--in-out [ accent colour modifiers ]">
	<div class="l-content-container">
		<ul class="a-list-plain m-read-next">
			<li class="m-card m-card--link m-read-next-button m-read-next-button--prev">
				<div class="m-card-content">
					<div class="m-card-content__inner">
						<span class="a-heading a-heading--3">Previous article</span>
						<span class="a-heading a-heading--2"><a class="m-card__link" href="..." aria-describedby="...">...</a></span>
					</div>
					<div class="m-card-content__inner m-card-content__inner--bottom">
						<p class="m-card-readmore" id="..." aria-hidden="true"><span>Read more</span></p>
					</div>
				</div>
			</li>
			<li class="m-card m-read-next-button m-read-next-button--next">
				<div class="m-card-content">
					<div class="m-card-content__inner">
						<span class="a-heading a-heading--3">Next article</span>
						<span class="a-heading a-heading--2"><a class="m-card__link" href="..." aria-describedby="...">...</a></span>
					</div>
					<div class="m-card-content__inner m-card-content__inner--bottom">
						<p class="m-card-readmore" id="..." aria-hidden="true"><span>Read more</span></p>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>

Development and test

Notes for developers

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

Clicking / pressing on a card should cause the card to gain focus

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to
`.m-read-next`	Container for read next component	Yes	`div`
`.m-read-next-button`	Button card for next / previous article	Yes	`a.m-card`
`.m-read-next-button--prev`	Modifier for previous article button	Yes	`.m-read-next-button`
`.m-read-next-button--next`	Modifier for next article button	Yes	`.m-read-next-button`

Keyboard operations

TAB: Tabbing to a card should make the card clearly visually different so that the focus point on the page is obvious to the user.

Component releases

Added on: v5.1.0 (03/11/20)

Latest update:

read next article for use in long form articles added.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team