OpenGov Visual Interface Documentation

Cards

Basic cards

Cards contain content that is related. Usually, multiple cards exist on the page together. They form the basis of other ui elements.

Card title

Edit

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus.

<div class="ui-card">
  <header class="ui-card__header">
    <h3>Card title</h3>
    <a class="ui-card__actions">Edit</a>
  </header>
  <div class="ui-card__content">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus.</p>
  </div>
</div>

Cards with tables

For now, tables float within cards. In the future consider making tables "full-bleed."

Card title

Column 1 Column 2 Column 3
Egestas purus 9602 4744
Egestas purus 9602 4744
<div class="ui-card">
  <header class="ui-card__header">
    <h3>Card title</h3>
  </header>
  <div class="ui-card__content">
    <div class="ui-table">
      <table>
        <thead>
          <tr>
            <th class="no-sort">Column 1</th>
            <th class="no-sort">Column 2</th>
            <th class="no-sort">Column 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Egestas purus</th>
            <td>9602</td>
            <td>4744</td>
          </tr>
          <tr>
            <th>Egestas purus</th>
            <td>9602</td>
            <td>4744</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Cards with actions

Cards can also contain actionable content too.

Card title

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus.

<div class="ui-card $">
  <header class="ui-card__header">
    <h3>Card title</h3>
  </header>
  <div class="ui-card__content">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus.</p>
  </div>
  <footer class="ui-card__footer">
    <div class="ui-card__actions">
      <a href="#">Cancel</a>
      <a href="#" class="ui-button primary">Action</a>
  </footer>
</div>

Modals

Modals are floating cards that demand a user's attention by overlaying the application workspace. Modals must contain an action (that usually dismiss) the modal. They may or may not have an "escape hatch" that allows the user to dismiss the modal with taking action.

<div class="ui-tab-card ">
  <nav class="ui-nav-tabs">
    <a class="ui-drawer__toggle ui-button ghost small"></a>
    <a class="ui-nav-tabs__tab is-selected">Item one</a>
    <a class="ui-nav-tabs__tab">Item two</a>
    <a class="icon-plus-2 ui-button small ghost pull-right">Add an item</a>
  </nav>
  <div class="stuff"></div>
</div>

Tab card

Card with tabs. Name says it all.

<div class="ui-tab-card ">
  <nav class="ui-nav-tabs">
    <a class="ui-drawer__toggle ui-button ghost small"></a>
    <a class="ui-nav-tabs__tab is-selected">Item one</a>
    <a class="ui-nav-tabs__tab">Item two</a>
    <a class="icon-plus-2 ui-button small ghost pull-right">Add an item</a>
  </nav>
  <div class="stuff"></div>
</div>

Report cards

Specialized thumbnails representing reports. Image is particular to report type.

<a class="ui-report-card">
  <div class="ui-report-card__thumbnail [modifier class]"></div>
  <div class="ui-report-card__details">
    <div class="ui-row">
      <div class="ui-col-5of6">
        <div class="ui-report-card__title">
          <h4>Report title</h4>
        </div>
        <small>
          Updated <strong>January 1, 2015</strong>
        </small>
      </div>
      <div class="ui-col-1of6">
        <span class="ui-report-card__icon icon-team-1"
          data-hint="Shared with my Organization"
          data-hint-position="bottom"
          data-hint-align="right">
        </span>
      </div>
    </div>
  </div>
</a>