This component hasn't been branded yet.

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

o-visual-effects

Sass mixins to use CSS visual effects

active

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>
Bower Dependencies
o-colors ^4.0.1
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-visual-effects@^2.0.3

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.