• Molecule
  • CORE COMPONENT
  • Taxonomic name: M-STORY-DECK
  • Extension: CARDS-EXTENDED
  • Added on: v3.1.0 (08/12/17)
  • Updated on: v5.6.0 (20/04/21)

Story deck

Story decks are used to place an image next to a text section with a header to present content in a story like format.

Design and usage

  • Story decks are full page width components
  • A maximum of four story tile rows can be placed beneath each other in each story deck, with a minimum of two
  • Keep the story copy short to retain image ratio of each tile at smaller screen sizes
  • No CTA's to be used within story decks
  • No links to be used on story deck images
  • Built to work on light and dark accent background colours.

Examples

Interactive example

Code example


<div class="m-story-deck" data-module="m-story-deck">
	<div class="m-story-deck-row [ Modifier ] [ Accent colour ]">
		<picture class="m-story-deck__image" data-module="u-objectfit">
			<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-story-deck__content">
			<h2 class="m-story-deck__heading a-heading a-heading--2">...</h2>
			<p class="[ Utility classes ]">...</p>
		</div>
	</div>
	<div class="m-story-deck-row [ Modifier ] [ Accent colour ]">
		<picture class="m-story-deck__image" data-module="u-objectfit">
			<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-story-deck__content">
			<h2 class="m-story-deck__heading a-heading a-heading--2"...</h2>
			<p class="[ Utility classes ]">...</p>
		</div>
	</div>
</div>

Development and test

Notes for developers

The background colours of the story deck should be alternate .t-accent-dark--8 and .t-accent-dark--7.

data-module="u-objectfit" required on image block for IE rendering.

Extension component

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

Image optimisation

picture elements should now be used in place of simple img elements and images should be served in the new WebP format in order to improve page performance. The width and height attribute should also be set with the pixel size of all images to be loaded in regardless of the image format, and the decoding="async" attribute added to all img elements.

See the Image Optimisation page in the How To... Developer's Guide for further information.

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-story-deck Base style for story deck Yes div  
.m-story-deck-row Base style for story row Yes .m-story-deck  
.m-story-deck-row--left Class to left align .m-story-deck-row image   .m-story-deck-row Story deck tiles should be alternately aligned left and right
.m-story-deck-row--right Class to right align .m-story-deck-row image   .m-story-deck-row Story deck tiles should be alternately aligned left and right
.m-story-deck__image Container style for story deck images Yes .m-story-deck-row > picture data-module="u-objectfit" required on image block for IE rendering
.m-story-deck__content Container style for story deck content Yes .m-story-deck-row > div  
.m-story-deck__heading Style to add bespoke heading margin-bottom Yes m-story-deck__content > h2  

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.1.0 (08/12/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.
  • 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