Responsive, configurable overlays for displaying notifications to users

View on GitHub

Quick start

Using the build service

Add the following token to your script and link tags (how do I do that?):


For more information see the Origami build service.

Using a manual build process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-overlay"@"^2.1.1"

For more information see the Origami build process.

Modal overlay


Standard modal. Includes a close button in the top left so the user can dismiss the overlay.

Modal without close button


Modal without a dismiss button in the top right. This should be used where the user has to make a choice or confirm they've seen something.

An overlay that is nested in the page


O-overlay can also be used to create overlays that don't sit in the front centre of the screen but appear in a specific area.

Component information

Latest stable version:
2.3.0 (2 days, 15 hours old)
Status (Learn more):
Active (as of 2.1.1)
Bundle sizes:
25.74KB JavaScript 4,138b CSS
This version
2.1.1 (4 months, 17 days old)
Support status (Learn more):
Active (as of 2.1.1)
Last indexed
19 Jan 2018 13:08:40 (Build now)
ftdomdelegate ^2.0.1 OK 2.1.0
o-colors ^4.0.0 OK 4.1.5
o-dom >=0.4.0 <3 OK 2.0.6
o-hoverable >=0.2.0 <4 OK 3.1.4
o-icons >=4.0.0 <6.0.0 OK 5.6.0
o-layers >=0.2.0 <3 OK 2.0.6
o-normalise ^1.2.1 OK 1.6.0
o-viewport >=0.1.1 <4 OK 3.1.5
o-visual-effects ^2.0.0 OK 2.0.3


To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue