Origami Frontend Components & Services

Demos: o-visual-effects

o-visual-effects hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.


<div class="o-visual-effects-shadow-ultralow">ultralow</div>

    <div class="o-visual-effects-shadow-low">low</div>

    <div class="o-visual-effects-shadow-mid">mid</div>

    <div class="o-visual-effects-shadow-high">high</div>


<div class="demo-canvas demo-off">
      <div class="demo-card demo-transitions demo-transitions--slide">
        <div class="demo-card-label">Slide</div>
      <div class="demo-card demo-transitions demo-transitions--expand">
        <div class="demo-card-label">Expand</div>
      <div class="demo-card demo-transitions demo-transitions--fade">
        <div class="demo-card-label">Fade</div>
      <button class="demo-toggle" type="button">Run demo</button>
Switch component view

GitHub Repository

Install o-visual-effects

If using the Build Service, add o-visual-effects@^4.0.1 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-visual-effects@^4.0.1".

Help & Support

o-visual-effects is maintained directly by the Origami team. If you have any questions about o-visual-effects or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com