• Molecule
  • OPEN SOURCE COMPONENT
  • Taxonomic name: M-CARD-AUDIO
  • Extension: LONG-FORM-ARTICLE
  • Current owner: Framework
  • Added on: v5.2.0 (17/11/20)
  • Updated on: v5.6.0 (20/04/21)

Audio card

The purpose of the audio player is to allow users to listen to recordings by Aviva, either via the default Framework audio player or SoundCloud. The audio player will promote sound bites, conversations and interviews supporting the long-form article content.

Design and usage

Structure

Square profile photo

  • Optional for inclusion but must only be included when there is a quote within the content area
  • Use a professional profile headshot, shot on a neutral background and uploaded at the correct resolution suitable for retina displays
  • Desktop: Positioned top right of the card spaning 4 columns
  • Tablet: Positioned bottom right of the card matching the height of the SoundCloud audio player. When using the default Framework audio player the photo is hidden.
  • Mobile: Positioned above the content area for the card spaning the full card width

Content area

  • Optional for inclusion
  • Contains an icon, quote, full name (first and last name) and job title
  • Desktop: Occupies the remaining space to the left of the profile picture
  • Tablet and mobile: Full width of the card

Audio player

  • Default Framework or SoundCloud audio player can be used
  • Positioned at the bottom of the card, below the content area

Transcript

  • Situated below the audio card spanning a maximum of 8 columns

Labels

  • Visually hidden heading and description are mandatory

Accessibility and screen readers

  • Image/text contrast in-line with pre-existing WCAG guidelines and established Framework components
  • Transcript always included below the audio card

Non-js requirements and considerations

  • SoundCloud player at the bottom of the card is fully hidden

Placement

  • Anywhere within a long form article chapter, sitting 10 columns at desktop and full width of the grid at all other sizes

Use case and exception scenarios

  • Designed exclusively for the long-form article template page

Design anatomy

  • Predominantly four themes for the component: white, dark grey, dark teal and plum
  • SoundCloud player has a background colour of #f5f5f5 and a button colour of #444

Examples

Audio card using Framework audio player

Interactive example

Code example

<div itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
	<h3 class="a-heading a-heading--3 a-heading--light u-hidden--visually" itemprop="name">...</h3>
	<p class="u-hidden--visually" itemprop="description">...</p>
	<div class="m-card m-card-audio [ Modifiers ]" data-module="m-card-audio">
		<div class="m-card-audio__audio-container">
			<audio src="..." controls data-module="m-media-player">
				<meta itemprop="duration" content="..." />
				<meta itemprop="embedURL" content="..." />
				<meta itemprop="uploadDate" content="..." />
				<meta itemprop="encodingFormat" content="mp3" />				<track label="..." kind="subtitles" srclang="..." src="..." default />				<a href="..." class="a-button a-button--download">Download MP3 audio file<span class="u-hidden--visually"> for ...</span></a>
			</audio>
		</div>
	</div>
	<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
		<h4 class="a-heading a-heading--4 m-showhide__heading">Transcript</h4>
		<div class="m-showhide__content" itemprop="transcript">
			...
		</div>
	</div>
</div>

Audio card with quote using Framework audio player

Interactive example

Code example

<div itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
	<h3 class="a-heading a-heading--3 a-heading--light u-hidden--visually" itemprop="name">...</h3>
	<p class="u-hidden--visually" itemprop="description">...</p>
	<div class="m-card m-card-audio [ Modifiers ]" data-module="m-card-audio">
		<div class="m-card-audio__content">
			<div class="m-card-content">
				<div class="m-card-content__inner">
					<blockquote class="a-quote a-quote--hidden">
						<p>...</p>
						<cite class="a-quote__citation">... <span class="a-quote__citation-role">...</span></cite>
					</blockquote>
				</div>
			</div>
		</div>
		<div class="m-card-audio__audio-container">
			<audio src="..." controls data-module="m-media-player">
				<meta itemprop="duration" content="..." />
				<meta itemprop="embedURL" content="..." />
				<meta itemprop="uploadDate" content="..." />
				<meta itemprop="encodingFormat" content="mp3" />				<track label="..." kind="subtitles" srclang="..." src="..." default />				<a href="..." class="a-button a-button--download">Download MP3 audio file<span class="u-hidden--visually"> for ...</span></a>
			</audio>
		</div>
	</div>
	<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
		<h4 class="a-heading a-heading--4 m-showhide__heading">Transcript</h4>
		<div class="m-showhide__content" itemprop="transcript">
			...
		</div>
	</div>
</div>

Audio card with quote and image using Framework audio player

Interactive example

Code example

<div itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
	<h3 class="a-heading a-heading--3 a-heading--light u-hidden--visually" itemprop="name">...</h3>
	<p class="u-hidden--visually" itemprop="description">...</p>
	<div class="m-card m-card-audio [ Modifiers ]" data-module="m-card-audio">
		<div class="m-card-audio__content">
			<picture class="m-card-image" data-module="u-objectfit">
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
			<div class="m-card-content">
				<div class="m-card-content__inner">
					<blockquote class="a-quote a-quote--hidden">
						<p>...</p>
						<cite class="a-quote__citation">... <span class="a-quote__citation-role">...</span></cite>
					</blockquote>
				</div>
			</div>
		</div>
		<div class="m-card-audio__audio-container">
			<audio src="..." controls data-module="m-media-player">
				<meta itemprop="duration" content="..." />
				<meta itemprop="embedURL" content="..." />
				<meta itemprop="uploadDate" content="..." />
				<meta itemprop="encodingFormat" content="mp3" />				<track label="..." kind="subtitles" srclang="..." src="..." default />				<a href="..." class="a-button a-button--download">Download MP3 audio file<span class="u-hidden--visually"> for ...</span></a>
			</audio>
		</div>
	</div>
	<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
		<h4 class="a-heading a-heading--4 m-showhide__heading">Transcript</h4>
		<div class="m-showhide__content" itemprop="transcript">
			...
		</div>
	</div>
</div>

Audio card using SoundCloud audio player

Interactive example

Code example

<div itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
	<h3 class="a-heading a-heading--3 a-heading--light u-hidden--visually" itemprop="name">...</h3>
	<p class="u-hidden--visually" itemprop="description">...</p>
	<div class="m-card m-card-audio m-card-audio--soundcloud [ Modifiers ]" data-module="m-card-audio">
		<div class="m-card-audio__audio-container" itemscope itemtype="https://schema.org/OnDemandEvent">
			<div class="m-card-audio__soundcloud-wrapper">
				<iframe scrolling="no" frameborder="no" allow="autoplay" title="..." data-src="..."></iframe>
			</div>
		</div>
	</div>
	<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
		<h4 class="a-heading a-heading--4 m-showhide__heading">Transcript</h4>
		<div class="m-showhide__content" itemprop="transcript">
			...
		</div>
	</div>
</div>

Audio card with quote using SoundCloud audio player

Interactive example

Code example

<div itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
	<h3 class="a-heading a-heading--3 a-heading--light u-hidden--visually" itemprop="name">...</h3>
	<p class="u-hidden--visually" itemprop="description">...</p>
	<div class="m-card m-card-audio m-card-audio--soundcloud [ Modifiers ]" data-module="m-card-audio">
		<div class="m-card-audio__content">
			<div class="m-card-content">
				<div class="m-card-content__inner">
					<blockquote class="a-quote a-quote--hidden">
						<p>...</p>
						<cite class="a-quote__citation">... <span class="a-quote__citation-role">...</span></cite>
					</blockquote>
				</div>
			</div>
		</div>
		<div class="m-card-audio__audio-container" itemscope itemtype="https://schema.org/OnDemandEvent">
			<div class="m-card-audio__soundcloud-wrapper">
				<iframe scrolling="no" frameborder="no" allow="autoplay" title="..." data-src="..."></iframe>
			</div>
		</div>
	</div>
	<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
		<h4 class="a-heading a-heading--4 m-showhide__heading">Transcript</h4>
		<div class="m-showhide__content" itemprop="transcript">
			...
		</div>
	</div>
</div>

Audio card with quote and image using SoundCloud audio player

Interactive example

Code example

<div itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
	<h3 class="a-heading a-heading--3 a-heading--light u-hidden--visually" itemprop="name">...</h3>
	<p class="u-hidden--visually" itemprop="description">...</p>
	<div class="m-card m-card-audio m-card-audio--soundcloud [ Modifiers ]" data-module="m-card-audio">
		<div class="m-card-audio__content">
			<picture class="m-card-image" data-module="u-objectfit">
				<source type="image/webp" srcset="..." width="..." height="..." />
				<img src="..." decoding="async" width="..." height="..." alt="" />
			</picture>
			<div class="m-card-content">
				<div class="m-card-content__inner">
					<blockquote class="a-quote a-quote--hidden">
						<p>...</p>
						<cite class="a-quote__citation">... <span class="a-quote__citation-role">...</span></cite>
					</blockquote>
				</div>
			</div>
		</div>
		<div class="m-card-audio__audio-container" itemscope itemtype="https://schema.org/OnDemandEvent">
			<div class="m-card-audio__soundcloud-wrapper">
				<iframe scrolling="no" frameborder="no" allow="autoplay" title="..." data-src="..."></iframe>
			</div>
		</div>
	</div>
	<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
		<h4 class="a-heading a-heading--4 m-showhide__heading">Transcript</h4>
		<div class="m-showhide__content" itemprop="transcript">
			...
		</div>
	</div>
</div>

Development and test

Notes for developers

When using the SoundCloud audio player ensure that the title attribute on the iframe contains a brief and unique description for that audio player.

Extension component

This component forms part of the 'long-form-article' extension and uses other extension components so requires an additional stylesheets 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/long-form-article.css" rel="stylesheet" />
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/quotes.css" rel="stylesheet" />
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/media.css" rel="stylesheet" />

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-audio Styling for audio card Yes .m-card  
.m-card-audio--soundcloud Modifier to adjust styling to support the SoundCloud player   .m-card-audio  
.m-card-audio__content Wrapper for the .m-card-image and .m-card-content Yes .m-card-audio > div  
.a-quote__citation-role Styling to change set font weight and force the role onto a separate line Yes .a-quote__citation > span  
.m-card-audio__audio-container Styling for the wrapper around the framework audio or SoundCloud player Yes .m-card-audio > div  
.m-card-audio__soundcloud-wrapper Styling for the wrapper around the SoundCloud player Yes .m-card-audio__audio-container > div Required if using the SoundCloud player

Keyboard operations

TAB

Tabbing to an video or audio control will make it clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus on play, pause, mute or full screen, pressing SPACE or ENTER will trigger the relevant behaviour.

Known accessibility issues

A user can gain focus of the progress bar for the audio or video player but they are unable to adjust where they are in the video using the keyboard.

Component releases

  • Added on: v5.2.0 (17/11/20)
  • 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