Text & Media - Astridd

Overview

The Text & Media component is a captivating way to display important text with visual support from media. It currently supports images or video. On mobile, the information stacks with the media sitting above the text.

The content can be vertically centred and there is an option to align the image to the left or right of the text.

Examples

Left variation

Text & Media heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.

<div class="text-media text-media--vertical-center">
<div class="text-media__col">
<div class="text-media__media">
<img src="http://placehold.it/600x400" alt="">
</div>
</div>
<div class="text-media__col">
<div class="text-media__content">
<h3>Text & Media heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.</p>
</div>
</div>
</div>

Right variation

Text & Media heading

<div class="text-media text-media--right text-media--vertical-center">
<div class="text-media__col">
<div class="text-media__media">
<div class="video video--square" data-myob-video-wistia data-video-id="tcvg89uomk">
<div class="wistia_embed wistia_async_tcvg89uomk wistia_embed_initialized seo=true videoFoam=true autoPlay=true"></div>
</div>
</div>
</div>
<div class="text-media__col">
<div class="text-media__content">
<h3>Text & Media heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat porttitor augue ac venenatis. Nulla bibendum vel nunc et commodo. Nulla facilisi. Cras sollicitudin arcu quis odio venenatis, sit amet pellentesque erat pharetra.</p>
</div>
</div>
</div>

Usage guidelines

Dos	Don'ts
Do use a heading that effectively summarises the main copy.	Don’t use overly long headings that flow over 2 lines.
Do ensure the body text is kept short or formatted.	Don't include too much detailed text, as it is best suited for high level points.
Do make sure to optimise your images to retain quality but minimise file size as much as possible.	Don't exceed a maximum file size of 100Kb.
If using more than one in a row, do alternate the alignment from left to right.

Implementation guidelines

Name	Class	Description
Alignment	`.text-media--right`	Change media position. Default is left.
Vertical alignment	`.text-media--vertical-center`	Vertically centre the child elements.