Placeholder for content being loaded. Will need additional work to support
buttons, positioning, and floating in a page. Adapted from a
Codepen by Jabran Rafique. The spinner
is available as a mixin, so you can apply it in a variety of situations. Use the
following syntax: @include spinner($size, $colorForeground, $colorBackground);
<div class="ui-loader">
<div class="ui-loading"></div>
<div class="ui-loader__message">
<small>Loading</small>
<strong>This thing with a long message</strong>
</div>
</div>
<div class="ui-loading"></div>
<div class="ui-loading_small"></div>
<div class="ui-button">
<span class="ui-loading_button"></span> Loading
</div>
Log in screens
<div class="ui-sessions__wrapper">
<div class="ui-alert [modifier class]">
<div class="ui-width-wrapper">
<p class="ui-alert__message">
<em>This is the title of the alert</em> This is the content of the alert. You can include a <a href="#">link.</a>
</p>
</div>
</div>
<section class="ui-sessions">
<header class="ui-sessions__header">
<div class="ui-logo">
<img src="assets/images/default-logo@2x.png">
</div>
</header>
<form>
<fieldset class="ui-form">
<label>Email</label>
<input type="email">
</fieldset>
<fieldset class="ui-form">
<label>Password</label>
<input type="password">
</fieldset>
<fieldset class="ui-form checkbox">
<label>
<input type="checkbox">
Remember me next time
</label>
</fieldset>
<input type="submit" class="ui-button primary" value="Sign in">
<a>Forget your password?</a>
</form>
</section>
<footer class="ui-global-footer">
<nav class="ui-nav-global">
<a class="ui-nav-global__item">Powered by OpenGov</a>
</nav>
</footer>
</div>
Creates a "check image" in HTML and CSS. This partial is not currently included in the Ovid compiled distribution CSS.
<div class="check-mock">
<div class="check-mock__container">
<header class="check-mock__header">
<dl>
<dt>The City of Cleveland Heights</dt>
<dd><a class="check-mock__filter">Police Department</a></dd>
</dl>
<div class="pull-right">
<dl>
<dt>Check date</dt>
<dd>1/17/2015</dd>
</dl>
<dl>
<dt>Check Number</dt>
<dd>00000000000000000</dd>
</dl>
</div>
</header>
<div class="check-mock__body">
<div class="ui-row">
<dl class="ui-col-6of6">
<dt>Pay to the order of</dt>
<dd class="check-mock__underline"><a class="check-mock__filter">Bob's Donuts</a></dd>
</dl>
</div>
<div class="ui-row">
<strong class="check-mock__amount-words check-mock__underline">
Two Hundred Fifty-Nine Dollars and Twenty-One Cents
</strong>
<strong class="check-mock__amount-numbers check-mock__box">$259.21</strong>
</div>
</div>
<footer class="check-mock__footer ui-row">
<dl class="ui-col-3of6">
<dt>Memo</dt>
<dd class="check-mock__underline">Tasty treats</dd>
</dl>
<div class="ui-col-3of6">
<p>This is not a real check image</p>
<p>Represents a payment made with public funds</p>
</div>
</footer>
</div>
</div>
Nulla facilisi. Duis aliquet egestas purus in.
Nulla facilisi. Duis aliquet egestas purus in.
Nulla facilisi. Duis aliquet egestas purus in.
Nulla facilisi. Duis aliquet egestas purus in.
<div class="ui-onboarding__container" style="height:200px">
<div class="ui-onboarding__waypoint [modifier class]">
<div class="ui-onboarding__bubble"></div>
<div class="ui-onboarding__tooltip">
<h4>Tip title</h4>
<p>Nulla facilisi. Duis aliquet egestas purus in.</p>
<footer class="ui-onboarding__footer">
<a class="ui-onboarding__skip">Skip these tips</a>
<button class="ui-onboarding__next ui-button small">Next tip</button>
</footer>
</div>
</div>
</div>
Placeholder for content being loaded. Will need additional work to support
buttons, positioning, and floating in a page. Adapted from a
Codepen by Jabran Rafique. The spinner
is available as a mixin, so you can apply it in a variety of situations. Use the
following syntax: @include spinner($size, $colorForeground, $colorBackground);
<a href="https://www.opengov.com" class="icon-powered-by"> Powered By OpenGov </a>