Pods are padded boxes for content that is in the sidebar for the content-standard layout (and content-blog with a modifier). They should never be used anywhere else, as they offset margin and paddings as well as adding "notches" to wrap around sidebar outlines.
Multi-section pods are created by by simply repeating the header and body elements.
Pods have quite a few usefull elements:
You can use
<div class="pod__hr"></div> for an inner separator.
For some extra text after your heading add a
<span class="pod__header-extra"></span> inside the pod heading tag.
Add an "pocket" image by adding
<img src="" class="pod__pocket-image"></img> inside the body, within a grid - scroll down for an example.
Ads, if they are images can be contained in pods as well - try
Note: Because of where the pods sit in the markup, the headings within the
pod__header elements will always be
Modifiers for pod
-blog- add for pods that are in a layout different the content-blog
-dark- for pods that need to stand out - use sparingly
-download- for pods on the report page
-staff- for admin pods
-hidden- add if you need to hide the pod
Modifiers for pod headers
-borderless- add to
pod__headerto remove the bottom border