OpenGov Visual Interface Documentation

Templates

Loading indicator

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);

Loading This thing with a long message
Loading
<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>

Sessions

Log in screens

This is the title of the alert This is the content of the alert. You can include a link.

Forget your password?

.whoops

Fail

This is the title of the alert This is the content of the alert. You can include a link.

Forget your password?
<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>

Check mockup

Creates a "check image" in HTML and CSS. This partial is not currently included in the Ovid compiled distribution CSS.

The City of Cleveland Heights
Police Department
Check date
1/17/2015
Check Number
00000000000000000
Pay to the order of
Bob's Donuts
Two Hundred Fifty-Nine Dollars and Twenty-One Cents $259.21
Memo
Tasty treats

This is not a real check image

Represents a payment made with public funds

<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>

Onboarding tooltips

Tip title

Nulla facilisi. Duis aliquet egestas purus in.

.is-selected

Selected tooltip

Tip title

Nulla facilisi. Duis aliquet egestas purus in.

.position_bottom.is-selected

Position the tooltip on the bottom

Tip title

Nulla facilisi. Duis aliquet egestas purus in.

.position_bottom.align_right.is-selected

Position the tooltip on the bottom and aligned right

Tip title

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>

Icon Stickers

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>