- Taxonomic name: M-CARD
- Extension: LONG-FORM-ARTICLE
- Current owner: Framework
- Added on: v5.2.0 (17/11/20)
- Updated on: v5.10.0 (10/08/21)
See also card
The purpose of the See Also component is to allow the user to view a shortlist of supporting articles of similar / relating content which may be of interest, within the context of the long-form article.
Design and usage
Structure
- Card made up of a heading and list of links to related content
- At desktop, the card is four columns wide and aligned to the far right of the grid; at all other screen sizes the card is full width sitting within the page content
Accessibility and screen readers
- Text contrast inline with pre-existing WCAG guidelines and established Framework components
- Link heights a minimum of 44px in-line with pre-existing WCAG guidelines and established Framework components
- Hover and focus states inline with pre-existing WCAG guidelines and established Framework components
Placement
- Anywhere within a long form article chapter, pulled out to the right at desktop
Use case and exception scenarios
- Designed exclusively for the long-form article template page
- If the supporting article links within the See Also component are specific and concerning the succeeding long-form article text, multiple See Also components can be added to an article; however, there must only be one See Also component within an individual article chapter; consolidate supporting article links into a single component where possible
Design anatomy
- There are predominantly four themes for the see also component - base grey, dark grey, dark teal and plum; please stick to a single theme per long-form article and avoid too many interaction patterns for the user to interpret
- Card spacing follows standard framework card spacing rules
- Heading is H2 bold
- Tertiary buttons have a font size of 20px and line-height of 28px
Examples
Interactive example
Code example
<div class="l-editorial-content"> ... <aside class="l-editorial-content__pullout l-editorial-content__pullout--right m-card m-card--see-also [ Modifiers ]" aria-labelledby="...">
<div class="m-card-content">
<div class="m-card-content__inner">
<h3 class="a-heading a-heading--2 a-heading--bold" id="...">...</h3>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<ul class="a-list-plain a-list-plain--tertiary-buttons">
<li><a href="..." class="a-button a-button--tertiary a-button--tertiary-shallow [ Modifiers ]"><span class="a-button__inner">...</span></a></li>
...
</ul>
</div>
</div>
</aside> ...</div>Development and test
Notes for developers
If multiple see also components are included within an article either ensure that each component heading has unique text or apply a unique but meaningful aria-label to m-card--see-also, for example:
<aside class="l-editorial-content__pullout l-editorial-content__pullout--right m-card m-card--see-also" aria-label="See also links for [ chapter name ]" >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
When testing using AXE, the following error will be thrown for this component: Aside must not be contained in another landmark. After review, it has been agreed that it is appropriate to ignore this error in this particular instance.
There must be a maximum of one see also component for an individual o-long-form-article-chapter
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-card--see-also |
Modifier to adjust styles for the see also card | Yes | .m-card |
Component releases
- Added on: v5.2.0 (17/11/20)
- Updated on: v5.10.0 (10/08/21)
Latest update:
- updated: It is recommended that all landmark elements have a unique label to aid assistive technology users with their understanding of the page they are viewing and its structure. The see also card has been updated to include appropriate aria to ensure this requirement is met.