Preview Banner

The Preview Banner is primarily used in conjuction with Matrix CMS

When a custom design system version has been requested with ?preview=..., the CMS will include <meta name="uom.preview" content="..."> in the <head> of the document.

This component will look for the presence of that tag and display a banner if it exists.

<meta name="uom.preview" content="latest" />

A cookie is used to store the value from the content attribute. It is then passed to the server on each subsequent page load to notify the server to keep loading the same version.

Clicking on the reset button clears the cookie and reloads the page, causing the server to revert back to the the default version.

For the purpose of this demo, the banner will always display.

Usage

Add the preview-banner.js script to the <head> of the document.

<script src="//dds-gen3.web.unimelb.edu.au/v13.3.3/preview-banner.js" defer></script>