DEPRECATED

This component has been deprecated. Move to using link cards.

  • Molecule
  • CORE COMPONENT
  • Taxonomic name: M-CARD
  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.6.0 (20/04/21)

Navigation 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 navigation cards, which can be used to link to other content.

Design and usage

  • Navigation 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

<a class="m-card [ Modifiers ]" href="...">
	<div class="m-card-content">
		<div class="m-card-content__inner m-card-content__inner--top">
			<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-readmore"><span>...</span></p>
		</div>
	</div>
</a>

With 16:9 image

Interactive example

Code example

<a class="m-card [ Modifiers ]" href="...">
	<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 m-card-content__inner--top">
			<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-readmore"><span>...</span></p>
		</div>
	</div>
</a>

Full-bleed and accent colour image cards

Interactive example

Code example

<a class="m-card [ Modifiers ] m-card-full-bleed [ Modifiers ] t-accent-dark" href="..." 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 m-card-content__inner--top">
			<p class="m-card-tagline">...</p>
			<h2 class="a-heading a-heading--1 a-heading--semibold">...</h2>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-readmore"><span>...</span></p>
		</div>
	</div>
</a>

With 1:1 image

Interactive example

Code example

<a class="m-card [ Modifiers ]" href="...">
	<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 m-card-content__inner--top">
			<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-readmore"><span>...</span></p>
		</div>
	</div>
</a>

1:1 50/50 cards

Interactive example

Code example

<a href="..." class="m-card 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 m-card-content__inner--top">
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<p>...</p>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-readmore"><span>...</span></p>
		</div>
	</div>
</a>

16:9 50/50 full width card

Interactive example

Code example

<a href="..." class="m-card 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 m-card-content__inner--top">
			<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-readmore"><span>...</span></p>
		</div>
	</div>
</a>

9:16 cards

Interactive example

Code example

<a href="..." class="m-card 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 m-card-content__inner--top">
			<p class="m-card-tagline">...</p>
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<p class="m-card-readmore"><span>...</span></p>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-tagline">...</p>
		</div>
	</div>
</a>

Video Cards

Interactive example

Code example

<div class="l-columns l-columns--2-medium l-columns--4-large [ Modifiers ]">
	<a class="l-columns__column m-card [ Modifiers ]" href="...">
		<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 m-card-content--left">
			<div class="m-card-content__inner m-card-content__inner--top">
				<p class="m-card-tagline">...</p>
				<p">...</p>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-readmore"><span>...</span></p>
			</div>
		</div>
	</a>
	...
	<!-- Optional now playing card - note that this element is a div not an anchor -->
	<div 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 m-card-content--left">
			<div class="m-card-content__inner m-card-content__inner--top">
				<p class="m-card-tagline">...</p>
				<p">...</p>
			</div>
			<div class="m-card-content__inner m-card-content__inner--bottom">
			<p><strong>Now playing</strong></p>
			</div>
		</div>
	</div>
</div>

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.

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.

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 Comments
.m-card Base style for card Yes a
a.l-columns__column
div
div.l-columns__column 		 
.m-card--double Additional style for a double-width column   .m-card  
.m-card--image-left
.m-card--image-right		 Additional style for positioning the image to the left/right   .m-card  
.m-card--50 Additional style for full width 50/50 split left/right image positioning   .m-card data-module="u-objectfit" required on image block for IE rendering
.m-card--33 Additional positioning style for 33/67 width split left/right in conjunction with .m-card-image--9x16   .m-card data-module="u-objectfit" required on image block for IE rendering
.m-card-image Base style for the image section of the card Yes .m-card > div  
.m-card-image--16x9 Additional style for image at 16:9 aspect ratio   .m-card-image  
.m-card-image--9x16 Additional 9:16 ratio style to be used in conjunction with .m-card--33   .m-card-image  
.m-card-image--1x1 Additional style for image at 1:1 aspect ratio   .m-card-image  
.m-card-image--icon Additional style for icon used as card image   .m-card-image  
.m-card-content Base style for the text section of card Yes .m-card > div  
.m-card-content__inner Base style for text section of card used to ensure elements align correctly Yes .m-card-content > div  
.m-card-content__inner--top Additional style used to ensure elements align correctly to top of card (used in conjunction with .m-card-content__inner--bottom)   .m-card-content__inner  
.m-card-content__inner--bottom Additional style used to ensure elements align correctly to bottom of card (used in conjunction with .m-card-content__inner--top)   .m-card-content__inner  
.m-card-content--centred Additional style to horizontally centre content within card   .m-card-content  
.m-card-content--middle Additional style to vertically centre content within card   .m-card-content  
.m-card-tagline Spaced and capitalised supporting text for dateline/category/byline   .m-card-content__inner p  
.m-card-readmore Supporting 'read more' link text   .m-card-content__inner p Add span inside this tag to ensure this element performs visually as a standard link
.m-card-full-bleed Base style for full-bleed image cards   .m-card Also add t-accent-dark class to same .m-card element to ensure font colour properties etc behave as expected
.m-card-full-bleed--left Additional style to move focus point of image to left   .m-card-full-bleed  
.m-card-full-bleed--right Additional style to move focus point of image to right   .m-card-full-bleed  
.m-card-content--left Additional style to move text content of image cards to the left   .m-card-full-bleed .m-card-content  
.m-card-content--right Additional style to move text content of image cards to the right   .m-card-full-bleed .m-card-content  
.m-card--video Base style for related video cards   .m-card  
.m-card-image__play Additional style to add video play icon over image (used in conjunction with .m-card--video)   .m-card-image > div  
.m-card-image__duration Additional style to add video duration text over image (used in conjunction with .m-card--video)   .m-card-image > div  

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.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.

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