Story deck
Taxonomic name: M-STORY-DECK
v.3.1.0 - Updated 05/12/17.
Molecule
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
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.
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
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
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.
<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.