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.0.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 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.0.0 (1 month, 23 days old)
Status (Learn more):
Active (as of 2.0.0)
Bundle sizes:
19.71KB JavaScript 4,137b CSS
This version
2.0.0 (1 month, 23 days old)
Support status (Learn more):
Active (as of 2.0.0)
Last indexed
27 Jul 2017 17:48:52 (Build now)
ftdomdelegate ^2.0.1 OK 2.1.0
o-colors ^4.0.0 OK 4.1.1
o-dom >=0.4.0 <3 OK 2.0.3
o-hoverable >=0.2.0 <4 OK 3.1.0
o-icons >=4.0.0 <6.0.0 OK 5.4.0
o-layers >=0.2.0 <3 OK 2.0.3
o-normalise ^1.2.1 OK 1.2.1
o-viewport >=0.1.1 <4 OK 3.1.2
o-visual-effects ^2.0.0 OK 2.0.0


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