Pods

DEPRECATED

Please move to using one of the card variants instead as soon as possible.

Taxonomic name: POD

Beta v.1.0.3 - Updated 27/03/17. Archives

Molecule

Pods are in-page sections which can contain copy or other basic material such as calls to action or notification messages.

Standard pods with print buttons are to be used with a single paragraph of information and to enable printing of the current page.

Pods are built to work on both light and dark accent colours.

For how to display notification or error messages see notification cards.

Examples

Standard pod

Heading

Some content

Some content

Heading

Some content

Some content

Standard pod with print button

To be used with a single paragraph of information and adding the ability to print the current page.

Your quote has been saved and been emailed to you.
Reference number: QTE062163639 (Valid for 30 days until 08/04/2016)

Notes for developers

To change the default text on the print button for a particular locale update your localle settings file.

var locale = {
	en: {
		printButton: {
			text: 'Print'
		}
	}
};

For more information on this, see our page on how to change locale settings within JavaScript.

Notes for testers

The print button within the standard pod is only available when JavaScript is available.

Code Examples

Standard pod

Heading

Some content

Some content

Heading

Some content

Some content

<div class="pod t-accent-light [ Modifier ]">
	<h2 class="pod__heading">...</h2>
	<div class="pod__content">
		...
	</div>
</div>

Standard pod with print button

To change the default text on the print button for a particular locale, see how to change locale settings within JavaScript.

Your quote has been saved and been emailed to you.
Reference number: QTE062163639 (Valid for 30 days until 08/04/2016)

<div class="pod t-accent-light">
	<h2 class="pod__heading">...</h2>
	<div class="pod__content">
		<div class="with-print-button" data-module="print-button">
			<p>...</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
.pod Base style for a pod Yes div  
.pod--bordered Modifier for a white bordered pod   .pod  
.pod__heading Base style for the main heading for a pod Yes .pod > h1, .pod > h2, .pod > h3 Should be the first visible element within a pod and only occur once for each pod
.pod__content Base style for the content container for a pod Yes .pod > div Should be directly within a pod and after any main heading.

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.