Taxonomic name: M-CARD--LINK
Added on: v5.5.0 (23/03/21)
Updated on: v5.6.0 (20/04/21)

Link cards

A card is container which is defined by its contents, which can be almost anything from our component library. On this page are basic examples of link cards, which can be used to navigate to other content.

Design and usage

Link cards may or may not contain images, and full bleed image cards are also available.
A maximum of four cards can be placed alongside each other in a desktop view, two at tablet view and one at mobile view.
When including a date line on a card, do not abbreviate the date; instead, use the full month name ie. 30 March 2016.

Examples

Plain card

Interactive example

Code example

<ul class="a-list-plain l-columns [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link [ Modifiers ]">
		<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"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
		</div>
	</li>
	...
</ul>

With 16:9 image

Interactive example

Code example

<ul class="a-list-plain l-columns [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link [ Modifiers ]">
		<div class="m-card-image m-card-image--16x9">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
		</div>
		<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"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
		</div>
	</li>
	...
</ul>

Full-bleed and accent colour image cards

Interactive example

Code example

<ul class="a-list-plain l-columns [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link [ Modifiers ] m-card-full-bleed [ Modifiers ] t-accent-dark" data-module="u-objectfit">
		<div class="m-card-image">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
		</div>
		<div class="m-card-content [ Modifiers ]">
			<div class="m-card-content__inner">
				<p class="m-card-tagline">...</p>
				<h2 class="a-heading a-heading--2 a-heading--semibold"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
		</div>
	</li>
	...
</ul>

With 1:1 image

Interactive example

Code example

<ul class="a-list-plain l-columns [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link [ Modifiers ]">
		<div class="m-card-image m-card-image--1x1">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
		</div>
		<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"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
		</div>
	</li>
	...
</ul>

1:1 50/50 cards

Interactive example

Code example

<ul class="a-list-plain l-columns [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link m-card--image-left m-card--50 [ Modifiers ]">
		<div class="m-card-image m-card-image--1x1" data-module="u-objectfit">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
		</div>
		<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"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-content__inner m-card-content__inner--bottom m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
		</div>
	</li>
	...
</ul>

16:9 50/50 full width card

Interactive example

Code example

<ul class="a-list-plain l-columns [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link m-card--image-left m-card--50 [ Modifiers ]">
		<div class="m-card-image m-card-image--16x9" data-module="u-objectfit">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
		</div>
		<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"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
		</div>
	</li>
	...
</ul>

9:16 cards

Interactive example

Code example

<ul class="a-list-plain l-columns [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link m-card--image-left m-card--33 [ Modifiers ]">
		<div class="m-card-image m-card-image--9x16" data-module="u-objectfit">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
		</div>
		<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"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
				<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-tagline">...</p>
			</div>
		</div>
	</li>
	...
</ul>

Video Cards

Interactive example

Code example

<ul class="a-list-plain l-columns l-columns--2-medium l-columns--4-large [ Modifiers ]">
	<li class="l-columns__column m-card m-card--link [ Modifiers ]">
		<div class="m-card-image">
			<picture>
				<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
				...
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
			<div class="m-card-image__play"></div>
			<div class="m-card-image__duration"><p>...</p></div>
		</div>
		<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"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
				<p>...</p>
				<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-dateline">...</p>
			</div>
		</div>
	</a>
	...
	<!-- Optional now playing card - note that this element is a div not an anchor -->
	<li class="l-columns__column m-card [ Modifiers ]">
		<div class="m-card-image">
			<img src="..." decoding="async" width="..." height="..." alt="...">
			<div class="m-card-image__now-playing" aria-hidden="true">Now playing</div>
		</div>
		<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>
				<p>...</p>
				<p><strong>Now playing</strong></p>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
				<p class="m-card-dateline">...</p>
			</div>
		</div>
	</li>
</ul>

Optional white card with border on white background

See tertiary cards for more information.

Development and test

Notes for developers

While cards can by created using individual div elements, it is recommended that sets of cards be contained as list items within a ul element in order to retain a link between them and to assist users taking advantage of screenreaders.

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.

An accent colour must be set on the card or on one of its parents to work correctly.

Lazy loading can be applied to cards using images. For how to do this see the lazy loading page for reference.

All link card .m-card-readmore elements errors must have a unique id assigned to them, have an aria-hidden attribute and be linked to the appropriate .m-card__link using aria-describedby. This ensures that the read more links are described as such immediately on focus.

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 aid in 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
`.m-card`	Base style for card	Yes	`a` `a.l-columns__column` `div` `div.l-columns__column`
`.m-card--link`	Additional style for link cards	Yes	`.m-card`
`.m-card__link`	Additional style for the active link with link cards	Yes	`.a-heading a`

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: v5.5.0 (23/03/21)
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.
updated: Markup has changed to use the picture element to improve page performance by allowing different sized images to be served for different screen sizes.

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