Responsive, configurable overlays that support modal and non-modal centered overlays and overlays with arrows

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"@"^1.17.0"

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 modal.

Modal without close button


Modal close cross removed. This should be used where the user has to make a choice or confirm they've seen something.

An overlay that slides into view


O-overlay can also be used to create notifications that slide into view.

Component information

Latest stable version:
2.3.0 (19 hours, 39 minutes old)
Status (Learn more):
Active (as of 1.17.0)
Bundle sizes:
27.16KB JavaScript 7.07KB CSS
This version
1.17.0 (10 months, 21 days old)
Support status (Learn more):
Active (as of 1.17.0)
Last indexed
19 Jan 2018 13:08:51 (Build now)
ftdomdelegate ^2.0.1 OK 2.1.0
o-colors >=2.5.0 <4 Out of date 4.1.5
o-dom >=0.4.0 <3 OK 2.0.6
o-hoverable >=0.2.0 <4 OK 3.1.4
o-layers >=0.2.0 <3 OK 2.0.6
o-viewport >=0.1.1 <4 OK 3.1.5


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