Skip to main content


Basic Modal

Your basic modal has a variety of elements to it. .c-overlay will expand to fill the current space, more information on overlays is available.

The modal body it self consists of cards , providing you with a consistent way of building structured content. Please familiarise yourself with what is possible with cards to make full use of modals.

Ghost Modal

This modal has no body, hence "ghost". Lol.

To make a ghost modal simply add the .o-modal--ghost modifier.

Scrollable content

To make a scrollable modal add the .o-panel class to the modal body, and apply a fixed height so long content starts to scroll.

Full screen modal

To make a full screen modal simply add the .o-modal--full modifier.


Attribute Description
open (boolean) Initial open/close state of the modal
dismissible (boolean) Allow the modal to be closed by clicking on the overlay or close button
full (boolean) Toggles the fullscreen style
ghost (boolean) Toggles the ghost modal style


To access public methods on the element first select it using document.querySelector() .

Method Description
show() Opens the modal
close() Hides the modal
isOpen() Returns true or false depending whether the modal is open or closed