Notification cards

By Ken Hawkins

lists built-in Requires EBI Visual Framework 1.2.0, 1.3.0

Present a running list of time-based notifications with status.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<ul class="no-bullet columns medium-4 medium-push-4">
  <li class="notifications-card">
    <div class="row callout collapse">
      <div class="columns medium-12">
        <span class="secondary-color small float-right">
          Started 14:14
        </span>
        <span class="label elixir-color">
          Failed
          <span class=""><i class="icon icon-common icon-clock"></i> 10 s.</span>
        </span>
        <h6>
          My test request job
        </h6>
        <div class="small">
          <a href="#" class="margin-right-medium readmore">Results</a>
          <a href="#" class="margin-right-medium readmore">Parameters</a>
        </div>
      </div>
    </div>
  </li>
  <li class="notifications-card">
    <div class="row callout collapse">
      <div class="columns medium-12">
        <span class="secondary-color small float-right">
          Started 14:14
        </span>
        <span class="label training-color">
          Processing
          <span class=""><i class="icon icon-common icon-clock"></i> 33 s.</span>
        </span>
        <h6>
          My test request job
        </h6>
        <div class="small">
          <a href="#" class="margin-right-medium readmore">Results</a>
          <a href="#" class="margin-right-medium readmore">Parameters</a>
        </div>
      </div>
    </div>
  </li>
  <li class="notifications-card">
    <div class="row callout collapse">
      <div class="columns medium-12">
        <span class="secondary-color small float-right">
          Started 14:14
        </span>
        <span class="label">
          Finished
          <span class=""><i class="icon icon-common icon-clock"></i> 1:35 m.</span>
        </span>
        <h6>
          My test request job
        </h6>
        <div class="small">
          <a href="#" class="margin-right-medium readmore">Results</a>
          <a href="#" class="margin-right-medium readmore">Parameters</a>
        </div>
      </div>
    </div>
  </li>
</ul>



JS