This component hasn't been branded yet.

If you would like to discuss having it branded please get in touch with the Origami team.


Sass mixins to use CSS visual effects



<div class="demo-card demo-shadows-elevation demo-shadows-elevation--ultralow">
	<div class="demo-card-label">ultralow</div>
<div class="demo-card demo-shadows-elevation demo-shadows-elevation--low">
	<div class="demo-card-label">low</div>
<div class="demo-card demo-shadows-elevation demo-shadows-elevation--mid">
	<div class="demo-card-label">mid</div>
<div class="demo-card demo-shadows-elevation demo-shadows-elevation--high">
	<div class="demo-card-label">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>
Bower Dependencies
o-colors ^4.0.1
GitHub Repository


Build Service

Add the following to your <link> tag


How do I do that?

For more information see the Origami build service.

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-visual-effects"@"^2.0.3"

For more information see the Origami build process.