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.

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 <div class="pod__ads"></div>.

Note: Because of where the pods sit in the markup, the headings within the pod__header elements will always be h2.

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__header to remove the bottom border