Story deck

Taxonomic name: M-STORY-DECK

v.3.1.0 - Updated 05/12/17.

Molecule

Design
Code

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

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

H2 Regular

Body copy Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

H2 Regular

Notes for developers

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

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

Code Examples

H2 Regular


<div class="m-story-deck" data-module="m-story-deck">
	<div class="m-story-deck__row [ Modifier ] [ Accent colour ]">
		<div class="m-story-deck__image" data-module="objectfit">
			<img src="[ Inline image url ]" alt="" />
		</div>
		<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 ]">
		<div class="m-story-deck__image" data-module="objectfit">
			<img src="[ Inline image url ]" alt="" />
		</div>
		<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>

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--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--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`	data-module="objectfit" required on image block for IE rendering
`.m-story-deck__content`	Container style for story deck content	Yes	`.m-story-deck__row`
`.m-story-deck__heading`	Style to add bespoke heading margin-bottom	Yes	`m-story-deck__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.