Origami Frontend Components & Services

Demos: o-visual-effects active

This version of o-visual-effects hasn't been branded yet. Please check the latest version, 2.1.0, as branding is a relatively new addition to our components.

Shadows

<div class="demo-card demo-shadows-elevation demo-shadows-elevation--ultralow">
	<div class="demo-card-label">ultralow</div>
</div>
<div class="demo-card demo-shadows-elevation demo-shadows-elevation--low">
	<div class="demo-card-label">low</div>
</div>
<div class="demo-card demo-shadows-elevation demo-shadows-elevation--mid">
	<div class="demo-card-label">mid</div>
</div>
<div class="demo-card demo-shadows-elevation demo-shadows-elevation--high">
	<div class="demo-card-label">high</div>
</div>

Transitions

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

GitHub Repository

Install o-visual-effects

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

If running a Manual Build, run bower install --save "o-visual-effects@^2.0.3".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com