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.