• Molecule
  • CORE COMPONENT
  • Taxonomic name: M-CARD--DOWNLOAD
  • Extension: CARDS-FUNCTIONAL
  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.7.0 (18/05/21)

Download cards

Download cards are used to link to assets or documents to be downloaded by users. They may be used individually, in groups, or as double-width feature cards.

Design and usage

  • Cards may include ordered and unordered lists of links, in which case a call to action button to download all may be helpful for users.
  • A document icon may be used to give more prominence to the download item.
  • The download icon should be used to indicate that it is possible to download this item; the document type and size should be listed inline with the download icon.
  • The entire card is clickable; in instances of lists, it is the full area of each list item within the list which is clickable.
  • A maximum of four cards can be placed alongside each other in a desktop view, two at tablet view and one at mobile view.
  • The numbered/ordered download list must only be used for listing up to nine documents. For listing more than nine documents in a single card, please use the unordered download list card.

Examples

Single links

Interactive example

Code example

<li class="m-card m-card--download [ Modifiers ]" href="...">
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<p class="m-card-tagline">...</p>
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-tagline">...</p>
		</div>
	</div>
</li>

Single links with icons

Interactive example

Code example

<li class="m-card m-card--download [ Modifiers ]" href="...">
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom m-card-flex">
			<img class="m-card-flex__image download-icon" src="..." decoding="async" width="..." height="..." alt="" />
			<div class="m-card-flex__inner">
				<p>...</p>
				<p class="m-card-tagline">...</p>
		</div>
	</div>
</li>

Single links group

Interactive example

Code example

<ul class="a-list-plain [ Modifiers ]">
	<li class="m-card m-card--download [ Modifiers ]" href="...">
		<div class="m-card-content">
			<div class="m-card-content__inner">
				<p class="m-card-tagline">...</p>
				<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
					<p class="mm-card-tagline">...</p>
			</div>
		</div>
	</li>
	...
	<li class="l-columns__column m-card--download">
		<button class="a-button a-button--transparent">...</button>
	</li>
</ul>

Download lists

Interactive example

Code example

Ordered download list
<li class="m-card m-card--download m-card--download-list [ Modifiers ]">
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<ol class="a-list-ordered m-card-download-list m-card-download-list--ordered">
				<li class="m-card-download-list-item">
					<a href="..." class="m-card-download-list-item__inner m-card-flex">
						<div class="m-card-flex__inner">
							<p">...</p>
							<p class="m-card-tagline">...</p>
						</div>
					</a>
				</li>
				...
			</ol>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<a href="..." class="a-button a-button--transparent">...</a>
		</div>
	</div>
</li>
Unordered download list
<li class="m-card m-card--download m-card--download-list [ Modifiers ]" >
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<ul class="a-list-plain m-card-download-list">
				<li class="m-card-download-list-item">
					<a href="..." class="m-card-download-list-item__inner m-card-flex">
						<div class="m-card-flex__inner">
							<p">...</p>
							<p class="m-card-tagline">...</p>
						</div>
					</a>
				</li>
				...
			</ul>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<a href="..." class="a-button a-button--transparent">...</a>
		</div>
	</div>
</li>
Unordered download list with icons
<li class="m-card m-card--download m-card--download-list [ Modifiers ]">
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<ul class="a-list-plain m-card-download-list m-card-download-list--icons">
				<li class="m-card-download-list-item">
					<a href="...." class="m-card-download-list-item__inner m-card-flex">
						<img class="m-card-flex__image" src="..." decoding="async" width="..." height="..." alt="..." />
						<div class="m-card-flex__inner">
							<p>...</p>
							<p class="m-card-tagline">...</p>
						</div>
					</a>
				</li>
				...
			</ul>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<a href="..." class="a-button a-button--transparent">...</a>
		</div>
	</div>
</li>

Optional white card with border on white background

See tertiary cards for more information.

Development and test

Notes for developers

Ensure the relevant accent colour type and colour option have both been specified for the card to guarantee the correct font colours within the card.

Extension component

This component forms part of the 'cards-functional' 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/cards-functional.css" rel="stylesheet" />

Notes for testers

  • Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
  • Ensure that when hovering over a link the style changes noticeably.
  • Ensure that when a link has focus the style changes noticeably.
  • Ensure that text within links is descriptive of what or where the link is going. Additional descriptive text can be hidden visually from the user to help make the link understandable, especially if there area number of links such as "Find out more" on the page which go to different locations.
  • Use a screen reader to confirm that the links are understandable.

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 Base style for card Yes a
a.l-columns__column
div
div.l-columns__column 		 
.m-card--download Base style for download cards Yes .m-card  
.m-card--download-list Additional base style for download cards with lists of items   .m-card  
.m-card-download-list Additional style for all download lists   ul.a-list-unordered or ul.a-list-ordered  
.m-card-download-list--icons Additional style for unordered lists using icons   .m-card-download-list  
.m-card-download-list--ordered Additional style for ordered lists   .m-card-download-list  
.m-card-download-list-item Additional style for list items   .m-card-download-list > li  
.m-card-download-list-item__inner Additional style for list item inner content   .m-card-download-list-item > a  
.m-card-flex Additional style used to ensure elements align correctly within download card (used only in conjunction with .m-card-flex__image and .m-card-flex__inner)   .m-card-content  
.m-card-flex__image Additional style used to ensure image element aligns correctly within download card (used only in conjunction with .m-card-flex and .m-card-flex__inner)   .m-card-content  
.m-card-flex__inner Additional style used to ensure elements align correctly within download card (used only in conjunction with .m-card-flex and .m-card-flex__image)   .m-card-content  

Keyboard operations

TAB

Tabbing to an anchor should make the social link 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 relevant page.

Component releases

  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.7.0 (18/05/21)

Latest update:

  • fixed: Fix for the colour of the download icon when placed on some accent colour combinations.

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