• content-lineA basic text line element.
  • content-buttonA basic element that can handle switching between anchor and button links, linking to trigger actions on the page, and making entire blocks clickable.
  • content-imageA basic element that shows lazy loaded images and MP4s as silent looping video.
  • content-video (alpha)A basic element for showing videos using VideoJS. Supports YouTube only at the moment.


  • content-text-blockA text block can be considered as the base text layer. It usually consists of content-line elements or content-spacer formatters. A text block is highly flexible and can be reused in many different places.
  • content-hero-blockA hero block is one of the two most common content blocks used. A hero block consists of a media layer with a text layer placed on top.
  • content-split-blockA split block is a common layout where two pieces of content are shown side by side. This is similar to a grid layout, but with the ability to reverse the columns per breakpoint. On smaller screens stacks into a tout layout.
  • content-tout-blockA tout block is a vertical structure with a media element and text block. A tout is usually displayed in a grid with other similar touts.


  • content-accordionAn accordion is a collection of collapsible fields. These components are fully keyboard accessible and are a popular design pattern for revealing additional content.
  • content-carousel (alpha)A content carousel built on SwiperJS.
  • content-tabsContent tabs reveal content and hide other expanded content in the same group.
  • Launch Full Screen Video
    content-overlayA content overlay is a dialog modal that is triggered to launch. A content overlay can either take over the entire screen or just the module it is contained within.


  • content-grid-formatterA grid that supports css grid and flex for displaying rows of content.
  • content-spacerA responsive spacing wrapper that can be used anywhere to format content.