Modal

The Modal component is a customisable light box. When triggered, it will appear over the content on the rest of the page. The modal’s content can contain a combination of other components including; text, imagery, videos and buttons. Interactive elements such as forms, will require development.

Overview

Text & image

Desktop

Tablet

Mobile

Text

Desktop

Tablet

Mobile

Slider

Desktop

Tablet

Mobile

Form

Desktop

Tablet

Mobile

Video

Desktop

Tablet

Mobile

Specification

This provides guidance on the build, layout and content options for this component.

Layout specification

Component item	Requirement & purpose	Optional or mandatory	CMS options
Height	Expands based on size of content.	n/a	n/a
Width	The modal is full width and the content is contained by the grid width.	n/a	n/a
Background colour	Allows user to set a background colour within the modal panel.	Optional	Choose from colour palette.
Display border	Allows user to apply a 2px wide border around the modal content.	Optional	Off/on.
Border colour	Allows the user to choose the border colour.	Optional	Choose from colour palette.
Border Radius	to ser border as rounded corner	Optional	Range slider
Modal ID	Allows the user to set an ID for the modal.	Mandatory	Text input.
Position	Allows the user to position the modal light box.	Optional	Top left, top centre, top right, centre left, centre, centre right, bottom left, bottom centre or bottom right.
Auto open	Allows for the modal to open without a trigger.	Optional	On/off.
Delay auto open	Allows the user to set a delay to the auto open.	Optional	Text input (milliseconds).
Auto close	Allows the modal to close without a trigger.	Optional	On/off.
Show overlay	Allows user to enable/disable modal overlay.	Optional	On/Off
Overlay click to close	Allows the modal to close without clicking the close icon.	Option	On/off.
Delay auto close	Allows the user to set a delay to the auto close.	Optional	Text input (milliseconds).
Show close button	Allows the user to show or hide the close button.	Optional	On/off.
Close button text	Sets the button text.	Optional	Text input.
Close button position	Allows the user to position the close button.	Optional	Top left, top centre, top right, centre left, centre right, bottom left, bottom centre or bottom right.
Overlay color	Allows user to set a colour that overlays the website behind the modal light box.	Optional	Choose from colour palette.
Padding	Different padding option for Desktop Tablet and Mobile	Optional	Range Slider
Modal width	To set width to different breakpoints Desktop, Tablet, Mobile	Optional	Desktop, Tablet, Mobile

Interaction

These are the interactive aspects of the component.

Interaction
Close button closes the modal.
Clicking outside of the light box closed the modal.
All other interactions defined by components used within modal.

Style Guide Manager

These are the Style Guide Manager settings that are specific to this component. For global settings see the Style Guide Manager section.

Property	Requirement & purpose	Default	SGM override
Close icon	Sets the site wide close icon.	FontAwesome f00d	Choose from icon picker.
Close icon colour	Sets the site wide close icon colour.	Back	Choose from colour palette.
Close icon background colour	Sets the site wide close icon background colour.	White	Choose from colour palette.
Close icon font size	Sets the site wide close icon font size.	16px	Choose size within range slider.

Example in Situ

Desktop

Tablet

Mobile

Usage

General usage dos and don'ts

✅ Dos	❌ Don'ts
Modal ID must be unique.