Looper Components

Looper includes new components to enhance the functionality of your apps.

Avatar

Avatars house an image that represents people or entity oriented object. An image is the preferred format for an avatar. If an image is unavailable, please use tile circle as a fallback, use one or up to two letter or object icon instead.

.user-avatar-xl
user-avatar-lg
user-avatar
user-avatar-sm
user-avatar-xs

<figure class="user-avatar">
  <img src="user.jpg" alt="User Avatar">
</figure>

Class References

.user-avatar: Apply to <figure> to create avatar component.
.user-avatar-xl: Apply to .user-avatar to increate avatar size to extra large.
.user-avatar-lg: Apply to .user-avatar to increate avatar size to large.
.user-avatar-sm: Apply to .user-avatar to increate avatar size to small.
.user-avatar-xs: Apply to .user-avatar to increate avatar size to extra small.

Pro Tips: Assuming that a user has filled his/her name, but didn't upload photo. In this case, You should use Tile circle as fallback. So, if the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback. See example below:

Beni Arisandi

BA Beni Arisandi

Marilyn

Ma Marilyn

Albert Donald Jimenez

AJ Albert Donald Jimenez

Albert Donald-Jimenez

AJ Albert Donald-Jimenez

bent10

Behavior

User avatars can display a badge indicator to show a user's availability and dropdown actions.

<figure class="user-avatar">
  <img src="user.jpg" alt="User Avatar">
  <span class="avatar-badge has-indicator online">
    <i class="fa fa-check"></i>
  </span>
</figure>

State	Example	Description
Online		The user is online and available.
Idle		The user is online but blocked notification or away.
Busy		The user is online and unavailable.
Offline		The user is offline or away and unavailable.
Actionable	Online Idle Busy Offline	The user can change their availability. Click the avatar to open dropdown action

Avatar Group

User avatars can be grouped together in a stack pattern to show multiple users as a team/contributors. Groups are limited to 3 or 5 avatars and 1 tile to indicate truncated avatars. The truncated avatars can be show using a dropdown menu or modal component. when user hover on avatar, a tooltip expands to reveal the avatar name.

+23

+21

Conversation

Used to display real-time and past message logs between users. It comes with a number of sub components that can be used to display the different types of message items.

<div role="log" class="conversations">
  <ul class="conversation-list">
    <li class="log-divider"></li>
    <li class="conversation-inbound"></li>
    <li class="conversation-outbound"></li>
  </ul>
</div>

Class references

.conversations: Apply to <div> to create conversations wrapper.
.conversation-list: Apply to <ul> to create conversation list.

Chat started by John Doe · Wed, Feb 14, 2018
Laboriosam asperiores cupiditate aperiam!

John Doe · 20m
Consectetur quis.

Beni Arisandi · 14m

<div role="log" class="conversations">
  <ul class="conversation-list">
    <li class="log-divider">
      <span class="bg-light">
        <i class="far fa-fw fa-comment-alt"></i>
        Chat started by <strong>John Doe</strong> &middot; Wed, Feb 14, 2018
      </span>
    </li>

    <li class="conversation-inbound">
      <div class="conversation-avatar">
        <a href="#" class="user-avatar">
          <img src="avatar.jpg" alt="User Avatar">
          <span class="avatar-badge online"></span>
        </a>
      </div>
      <div class="conversation-message bg-white">
        <div class="conversation-message-text">
          Laboriosam asperiores cupiditate aperiam!
        </div>
        <div class="conversation-meta">
          John Doe &middot; 20m
        </div>
      </div>
      <div class="conversation-actions">
        <button class="btn btn-light circle"><i class="far fa-trash-alt"></i></button>
      </div>
    </li>

    <li class="conversation-outbound">
      <div class="conversation-actions">
        <button class="btn btn-light circle"><i class="far fa-trash-alt"></i></button>
      </div>
      <div class="conversation-message">
        <div class="conversation-message-text">
          Consectetur quis.
        </div>
        <div class="conversation-meta">
          Beni Arisandi &middot; 14m
        </div>
      </div>
    </li>
  </ul>
</div>

Conversation List comes with 3 different item types:

Item	Class	Description
Inbound message	`.conversation-inbound`	Contain messages from other users
Outbound message	`.conversation-outbound`	Contain messages from users itself
Log Event	`.log-divider`	Contain log event from system and users

Expansion cards

A lightweight container that may either stand alone or be connected to a larger surface, such as a card.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div id="accordion" class="card-expansion">
  <!-- .card -->
  <div class="card card-expansion-item expanded">
    <div class="card-header border-0" id="headingOne">
      <button class="btn btn-reset" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <span class="collapse-indicator mr-2">
          <i class="fa fa-fw fa-caret-right"></i>
        </span>
        <span>Expandable Item #1</span>
      </button>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body pt-0">
        Content #1
      </div>
    </div>
  </div>
  <!-- /.card -->

  <!-- .card -->
  <div class="card card-expansion-item">
    <div class="card-header border-0" id="headingTwo">
      <button class="btn btn-reset collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <span class="collapse-indicator mr-2">
          <i class="fa fa-fw fa-caret-right"></i>
        </span>
        <span>Expandable Item #2</span>
      </button>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body pt-0">
        Content #2
      </div>
    </div>
  </div>
  <!-- /.card -->

  <!-- .card -->
  <div class="card card-expansion-item">
    <div class="card-header border-0" id="headingThree">
      <button class="btn btn-reset collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        <span class="collapse-indicator mr-2">
          <i class="fa fa-fw fa-caret-right"></i>
        </span>
        <span>Expandable Item #3</span>
      </button>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body pt-0">
        Content #3
      </div>
    </div>
  </div>
  <!-- /.card -->
</div>

Collapse Indicator References

.fa-plus: Apply to .fa to use plus icon as a collapse indicator.
.fa-angle-down: Apply to .fa to use angle down icon as a collapse indicator.
.fa-caret-down: Apply to .fa to use caret down icon as a collapse indicator.
.fa-chevron-down: Apply to .fa to use chevron down icon as a collapse indicator.
.oi-caret-down: Apply to .oi to use caret down icon as a collapse indicator.
.oi-chevron-down: Apply to .oi to use chevron down icon as a collapse indicator.
.fa-angle-right: Apply to .fa to use angle right icon as a collapse indicator.
.fa-caret-right: Apply to .fa to use caret right icon as a collapse indicator.
.fa-chevron-right: Apply to .fa to use chevron right icon as a collapse indicator.
.oi-caret-right: Apply to .oi to use caret right icon as a collapse indicator.
.oi-chevron-right: Apply to .oi to use chevron right icon as a collapse indicator.
.fa-circle: Apply to .fa to use circle icon as a collapse indicator.
.fa-dot-circle: Apply to .fa to use dot circle icon as a collapse indicator.

Feeds

A linear, single-threaded of a list of recurring elements of similar types. It can be a discussion, post, pages, tasks, issues displayed in chronological order. Depending on the context, It can take place among authors of feed, audiences, and readers.

David Collins

New member · Yesterday at 5:48 PM

Hey there! this is a post with outbound link, @stilearning ratione doloremque eos #looper aliquid ipsam, molestias cumque asperiores mollitia nam corrupti dolore recusandae nihil?

Expanding Your Home Network’s Reach

Atque natus, quod quas commodi beatae inventore eligendi recusandae necessitatibus eum distinctio.

6.3K likes 826 comments · 2.9K shares

Expand all 1 of 12

Sara Ward Laboriosam asperiores cupiditate aperiam!

Like · Reply · 1hr

<div class="feed">
  <!-- .feed-post -->
  <div class="feed-post card">
    <!-- .card-header -->
    <div class="card-header card-header-fluid">
      <a href="#" class="btn-account" role="button">
        <div class="user-avatar user-avatar-lg">
          <img src="avatar.jpg" alt="Beni Arisandi">
        </div>
        <div class="account-summary">
          <p class="account-name">Beni Arisandi</p>
          <p class="account-description">New member &middot; Yesterday at 5:48 PM</p>
        </div>
      </a>
      <!-- .dropdown -->
      <div class="dropdown align-self-start ml-auto">
        <button class="btn btn-icon btn-light" data-toggle="dropdown">
          <i class="fa fa-fw fa-ellipsis-v"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <div class="dropdown-arrow"></div>
          <a href="#" class="dropdown-item">Get notified</a>
          <a href="#" class="dropdown-item">Mute notified</a>
          <a href="#" class="dropdown-item">Permalink</a>
          <a href="#" class="dropdown-item">Block this user</a>
          <a href="#" class="dropdown-item">Remove</a>
        </div>
      </div>
      <!-- /.dropdown -->
    </div>
    <!-- /.card-header -->
    <!-- .card-body -->
    <div class="card-body">
      <p class="mb-2">Feed content.</p>

      <!-- .feed-summary -->
      <div class="feed-summary">
        <a href="#" class="feed-summary-item ml-auto">10 likes</a>
        <a href="#" class="feed-summary-item">&middot;</a>
        <a href="#" class="feed-summary-item">12 comments</a>
      </div>
      <!-- .feed-summary -->
    </div>
    <!-- /.card-body -->

    <!-- .card-footer -->
    <div class="card-footer">
      <div class="card-footer-item">
        <button type="button" class="btn btn-reset text-muted"><i class="fa fa-fw fa-thumbs-up"></i> Like</button>
      </div>
      <div class="card-footer-item">
        <button type="button" class="btn btn-reset text-muted"><i class="fa fa-fw fa-comment"></i> Comment</button>
      </div>
      <div class="card-footer-item">
        <button type="button" class="btn btn-reset text-muted"><i class="fa fa-fw fa-share"></i> Share</button>
      </div>
    </div>
    <!-- /.card-footer -->
  </div>
  <!-- /.feed-post -->

  <!-- .feed-comments -->
  <div class="feed-comments card">
    <!-- .card-header -->
    <div class="card-header d-flex justify-content-between">
      <a href="#">Expand all</a>
      <span class="text-muted">1 of 12</span>
    </div>
    <!-- /.card-header -->
    <!-- .conversations -->
    <div role="log" class="conversations">
      <!-- .conversation-list -->
      <ul class="conversation-list">
        <!-- .conversation-inbound -->
        <li class="conversation-inbound">
          <!-- .conversation-avatar -->
          <div class="conversation-avatar">
            <a href="#" class="user-avatar">
              <img src="avatar.jpg" alt="Beni Arisandi">
            </a>
          </div>
          <!-- /.conversation-avatar -->
          <!-- .conversation-message -->
          <div class="conversation-message">
            <div class="conversation-message-text"><a href="#"><strong>Beni arisandi</strong></a> Laboriosam asperiores cupiditate aperiam!</div>
            <div class="conversation-meta">
              <a href="#">Like</a> &middot; <a href="#">Reply</a> &middot; 1hr
            </div>
          </div>
          <!-- /.conversation-message -->
        </li>
        <!-- /.conversation-inbound -->

        <!-- .conversation-action -->
        <li class="conversation-action mt-3">
          <!-- use publisher to post a conversation here -->
        </li>
        <!-- /.conversation-action -->
      </ul>
      <!-- /.conversation-list -->
    </div>
    <!-- /.conversations -->
  </div>
  <!-- /.feed-comments -->
</div>

Figures

Easily display grids of images, videos, text, and more.

Card image cap — Simple figure

Give some text description

<div class="card card-figure">
  <!-- .card-figure -->
  <figure class="figure">
    <!-- .figure-img -->
    <div class="figure-img">
      <img class="img-fluid" src="assets/images/dummy/img-12.jpg" alt="Card image cap">
      <div class="figure-description">
        <h6 class="figure-title">Figure description</h6>
        <p class="text-muted mb-0"><small>Laboriosam neque officia adipisci quo ut placeat labore? Doloribus, ipsam? Voluptates, minus.</small></p>
      </div>
      <div class="figure-tools">
        <a href="#" class="tile tile-circle tile-sm mr-auto">
          <span class="oi oi-data-transfer-download"></span>
        </a>
        <span class="badge badge-warning">Gadget</span>
      </div>
      <div class="figure-action">
        <a href="#" class="btn btn-block btn-sm btn-primary">Quick Action</a>
      </div>
    </div>
    <!-- /.figure-img -->
    <figcaption class="figure-caption">
      <ul class="list-inline d-flex text-muted mb-0">
        <li class="list-inline-item mr-auto"><span class="oi oi-paperclip"></span> 2MB</li>
        <li class="list-inline-item"><span class="oi oi-calendar"></span> Apr 11, 2018</li>
      </ul>
    </figcaption>
  </figure>
  <!-- /.card-figure -->
</div>

Class references

.is-hoverable: Apply to .card-figure to increase shadow and give a bit transform animation on hover.

Icons

Come with two icon sets, includes 223 Open Iconic and 1,109 Font Awesome Icons.

Use with button

List Icons

Ullam odit vel at, commodi atque ratione?
Eligendi aliquid quis reprehenderit, officia fuga vero.
Nostrum perspiciatis laboriosam mollitia assumenda beatae distinctio!

<button class="btn btn-secondary">
  <i class="oi oi-data-transfer-download mr-1"></i>
  Button
</button>

<ul class="list-icons">
  <li>
    <span class="list-icon"><i class="fa fa-check"></i></span>
    Ullam odit vel at, commodi atque ratione?
  </li>
</ul>

Metrics

Get a clear view of a key performance values that you're measuring.

Teams

<div class="metric metric-bordered align-items-center">
  <p class="metric-value h3">
    <sub><i class="oi oi-people fa-lg"></i></sub>
    <span class="value">8</span>
  </p>
  <h2 class="metric-label">Teams</h2>
</div>

<!-- view metric as a card -->
<div class="card-metric">
  <div class="metric">
    <p class="metric-value h3">
      <sub><i class="oi oi-fork"></i></sub>
      <span class="value">12</span>
    </p>
    <h2 class="metric-label">Teams</h2>
  </div>
</div>

Class references

.metric: Apply to <div> or <a> to create a metric.
.metric-bordered: Apply to .metric to add solid border.
.card-metric: Apply to .metric parent to make the metric like a card.

Metrics Group & Nesting

Group metrics by their family to easily monitoring your bussiness objective at multiple levels.

Teams

Projects

Active Tasks

ONGOING TASKS

<div class="metric-row">
  <!-- metric column -->
  <div class="col-lg-9">
    <!-- nesting metric group -->
    <!-- metric row -->
    <div class="metric-row metric-flush">
      <!-- metric column -->
      <div class="col">
        <!-- .metric -->
        <a href="user-teams.html" class="metric metric-bordered align-items-center">
          <h2 class="metric-label">Teams</h2>
          <p class="metric-value h3">
            <sub><i class="oi oi-people"></i></sub>
            <span class="value">8</span>
          </p>
        </a>
        <!-- /.metric -->
      </div>
      <!-- /metric column -->
      <!-- metric column -->
      <div class="col">
        <!-- .metric -->
        <a href="user-projects.html" class="metric metric-bordered align-items-center">
          <h2 class="metric-label">Projects</h2>
          <p class="metric-value h3">
            <sub><i class="oi oi-fork"></i></sub>
            <span class="value">12</span>
          </p>
        </a>
        <!-- /.metric -->
      </div>
      <!-- /metric column -->
      <!-- metric column -->
      <div class="col">
        <!-- .metric -->
        <a href="user-tasks.html" class="metric metric-bordered align-items-center">
          <h2 class="metric-label">Active Tasks</h2>
          <p class="metric-value h3">
            <sub><i class="fa fa-tasks"></i></sub>
            <span class="value">64</span>
          </p>
        </a>
        <!-- /.metric -->
      </div>
      <!-- /metric column -->
    </div>
    <!-- /metric row -->
  </div>
  <!-- /metric column -->

  <!-- metric column -->
  <div class="col-lg-3">
    <!-- .metric -->
    <a href="user-tasks.html" class="metric metric-bordered">
      <div class="metric-badge">
        <span class="badge badge-lg badge-success">
          <span class="oi oi-media-record pulse mr-1"></span>
          ONGOING TASKS
        </span>
      </div>
      <p class="metric-value h3">
        <sub><i class="oi oi-timer"></i></sub>
        <span class="value">8</span>
      </p>
    </a>
    <!-- /.metric -->
  </div>
  <!-- /metric column -->
</div>

Publisher

Advanced longform text input form element.

Reply to: Beni Arisandi

<!-- .media -->
<div class="media">
  <figure class="user-avatar user-avatar-md mr-2">
    <img src="images/avatars/uifaces4.jpg" alt="User Avatar">
  </figure>
  <!-- .media-body -->
  <div class="media-body">
    <!-- .publisher -->
    <div class="publisher keep-focus focus">
      <label for="publisherInput" class="publisher-label">Reply to: Beni Arisandi</label>
      <!-- .publisher-input -->
      <div class="publisher-input">
        <textarea id="publisherInput" class="form-control" placeholder="Write a comment"></textarea>
      </div>
      <!-- /.publisher-input -->
      <!-- .publisher-actions -->
      <div class="publisher-actions">
        <!-- .publisher-tools -->
        <div class="publisher-tools mr-auto">
          <button type="button" class="btn btn-link fileinput-button">
            <i class="fa fa-paperclip"></i>
            <input type="file" id="attachment" name="attachment[]" multiple>
          </button>
          <button type="button" class="btn btn-link"><i class="far fa-smile"></i></button>
        </div>
        <!-- /.publisher-tools -->
        <button type="submit" class="btn btn-primary">Publish</button>
      </div>
      <!-- /.publisher-actions -->
    </div>
    <!-- /.publisher -->
  </div>
  <!-- /.media-body -->
</div>
<!-- /.media -->

Class references

.publisher: Apply to <div> to create a publisher.
.publisher-alt: Apply to .publisher to add difference style of publisher.
.focus: Apply to .publisher to expand a publisher on focus.
.keep-focus: Apply to .publisher to make publisher never be collapsed on focusout.

Steps

A progress tracker to guide users through steps or actions across multiple screens, in order to completed a task. The progress tracker shows users where they are in the process, and can be used to navigate through the process by selecting steps.

<div class="steps">
  <ul>
    <li class="success">
      <a href="#" tabindex="-1">
        <span class="step-indicator step-indicator-icon">
          <i class="oi oi-flag"></i>
        </span>
        <span class="d-none d-sm-inline">Welcome</span>
      </a>
    </li>
    <li class="error">
      <a href="#" tabindex="-1">
        <span class="step-indicator step-indicator-icon">
          <i class="fa fa-id-card-alt"></i>
        </span>
        <span class="d-none d-sm-inline">Upload Photo</span>
      </a>
    </li>
    <li class="active">
      <a href="#" tabindex="-1">
        <span class="step-indicator step-indicator-icon">
          <i class="oi oi-people"></i>
        </span>
        <span class="d-none d-sm-inline">Find People</span>
      </a>
    </li>
    <li>
      <a href="#" tabindex="-1">
        <span class="step-indicator step-indicator-icon">
          <i class="oi oi-wrench"></i>
        </span>
        <span class="d-none d-sm-inline">Account Details</span>
      </a>
    </li>
  </ul>
</div>

Class references

.active: Apply to <li> to shows the current step that user is on.
.success: Apply to <li> to shows the done/competed step.
.error: Apply to <li> to shows the current step in error state.

Pro Tips:

Keep your steps short and not overwhelming, the max number of step item is 6. If a task needs more than 6 steps, consider simplifying the process or breaking it up into multiple tasks.
Use labels that clearly indicate the purpose of the step. When writing, keep options to a single line of text (1-2 words), be short and clear.

Progress List

This is an alternative approach to guide user to completed a task. Used the same use case as steps.

Connecting
Authentication
Fetching Data

<ol class="progress-list">
  <li class="success">
    <button type="button">
      <!-- progress indicator -->
      <span class="progress-indicator"></span>
    </button>
    <span class="progress-label d-none d-sm-inline-block">Connecting</span>
  </li>
  <li class="active">
    <button type="button">
      <!-- progress indicator -->
      <span class="progress-indicator"></span>
    </button>
    <span class="progress-label d-none d-sm-inline-block">Authentication</span>
  </li>
  <li>
    <button type="button">
      <!-- progress indicator -->
      <span class="progress-indicator"></span>
    </button>
    <span class="progress-label d-none d-sm-inline-block">Fetching Data</span>
  </li>
</ol>

Sticker

Enhance the way we use decorative images and background. Sticker can be used in any component, keep in mind that these components must use `position: relative`.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse repellat quam veniam cupiditate ad nemo, iusto debitis officia quas in at vitae, eum officiis est incidunt. Itaque laboriosam porro, quaerat?

<!-- sticker as a decoration -->
<div class="position-relative py-5 mb-5">
  <!-- .sticker -->
  <div class="sticker">
    <div class="sticker-item sticker-middle sticker-soften">
      <img src="images/decoration/bubble1.svg" alt="">
    </div>
  </div>
  <!-- /.sticker -->
  <!-- .card -->
  <div class="card mx-auto rounded-lg" style="max-width: 400px">
    <img class="img-fluid rounded-lg" src="images/dummy/happy-client.jpg" alt="">
  </div>
  <!-- /.card -->
</div>
<!-- sticker as a decoration -->

<!-- sticker as a separator -->
<div class="position-relative py-4 mb-5">
  <!-- .sticker -->
  <div class="sticker">
    <!-- .sticker-item -->
    <div class="sticker-item sticker-top-left w-100">
      <!-- wave1.svg => height: 32px/2rem -->
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="32" viewBox="0 0 1440 240" preserveAspectRatio="none">
        <path class="fill-primary" fill-rule="evenodd" d="M1070.39 25.041c107.898 11.22 244.461 20.779 369.477 51.164L1440 240H0L.133 72.135C350.236-17.816 721.61-11.228 1070.391 25.04z"></path>
      </svg>
    </div>
    <!-- /.sticker-item -->
    <!-- .sticker-item -->
    <div class="sticker-item sticker-bottom-left w-100">
      <!-- wave1.svg -->
      <svg class="flip-y" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="32" viewBox="0 0 1440 240" preserveAspectRatio="none">
        <path class="fill-primary" fill-rule="evenodd" d="M1070.39 25.041c107.898 11.22 244.461 20.779 369.477 51.164L1440 240H0L.133 72.135C350.236-17.816 721.61-11.228 1070.391 25.04z"></path>
      </svg>
    </div>
    <!-- /.sticker-item -->
  </div>
  <!-- /.sticker -->
  <div class="bg-primary text-white p-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse repellat quam veniam cupiditate ad nemo, iusto debitis officia quas in at vitae, eum officiis est incidunt. Itaque laboriosam porro, quaerat?</p>
  </div>
</div>
<!-- sticker as a separator -->

Class references

.sticker-item: Apply to <div> to create a sticker.
.sticker-soft: Apply to .sticker-item to decrease opacity to 54%.
.sticker-soften: Apply to .sticker-item to decrease opacity to 12%.
.sticker-middle: Apply to .sticker-item to positioning the sticker in the middle of the parent.
.sticker-middle-right: Apply to .sticker-item to positioning the sticker in the middle-right of the parent.
.sticker-middle-left: Apply to .sticker-item to positioning the sticker in the middle-left of the parent.
.sticker-top-right: Apply to .sticker-item to positioning the sticker in the top-right of the parent.
.sticker-top-center: Apply to .sticker-item to positioning the sticker in the top-center of the parent.
.sticker-top-left: Apply to .sticker-item to positioning the sticker in the top-left of the parent.
.sticker-bottom-right: Apply to .sticker-item to positioning the sticker in the bottom-right of the parent.
.sticker-bottom-center: Apply to .sticker-item to positioning the sticker in the bottom-center of the parent.
.sticker-bottom-left: Apply to .sticker-item to positioning the sticker in the bottom-left of the parent.

Tasks

A tasks gives you a clear visual overview of what is being worked on and who is working on it and other information that used for project management purpose.

Task title

Issue Title

03:11 / 6:00 · Apr 07

<div class="tasks">
  <!-- .tasks-header -->
  <div class="task-header">
    <h3 class="task-title mr-auto">Task title</h3>
    <div class="dropdown">
      <button class="btn btn-icon btn-light"><i class="fa fa-ellipsis-v"></i></button>
    </div>
  </div>
  <!-- /.tasks-header -->

  <!-- .task-body -->
  <div class="task-body">
    <!-- .task-issue -->
    <div class="task-issue">
      <!-- .card -->
      <div class="card">
        <!-- .card-header -->
        <div class="card-header">
          <h4 class="card-title">
            <a href="#">Issue Title</a>
          </h4>
          <h6 class="card-subtitle text-muted">
            <span class="text-muted">03:11</span> / <span class="text-muted">6:00</span>
            <span class="mx-1">&middot;</span>
            <span class="due-date"><i class="far fa-fw fa-clock"></i> Apr 07</span>
          </h6>
        </div>
        <!-- /.card-header -->

        <!-- .card-body -->
        <div class="card-body pt-0">
          <!-- .list-group -->
          <div class="list-group">
            <!-- .list-group-item -->
            <div class="list-group-item">
              <a href="#" class="stretched-link"></a>
              <!-- .list-group-item-body -->
              <div class="list-group-item-body">
                <!-- members -->
                <figure class="user-avatar user-avatar-sm" data-toggle="tooltip" title="Johnny Day">
                  <img src="avatar.jpg" alt="Johnny Day">
                </figure>
                <figure class="user-avatar user-avatar-sm" data-toggle="tooltip" title="Sarah Bishop">
                  <img src="avatar.jpg" alt="Sarah Bishop">
                </figure>
                <!-- /members -->
              </div>
              <!-- /.list-group-item-body -->
            </div>
            <!-- /.list-group-item -->
          </div>
          <!-- /.list-group -->
        </div>
        <!-- /.card-body -->

        <!-- .card-footer -->
        <div class="card-footer">
          <a href="#" class="card-footer-item card-footer-item-bordered text-muted">
            <i class="oi oi-comment-square mr-1"></i> 36
          </a>
          <a href="#" class="card-footer-item card-footer-item-bordered text-muted">
            <i class="fa fa-play text-teal"></i>
          </a>
        </div>
        <!-- /.card-footer -->
      </div>
      <!-- .card -->
    </div>
    <!-- /.task-issue -->
  </div>
  <!-- /.task-body -->
</div>

Tiles

A tile is a wrapper for initial letter, object icon or image that can be used to illustrated list of data. It also used for avatar fallback when users doesn't upload their photo.

BA BA B B

<div class="tile tile-lg"><span class="oi oi-person"></span></div>
<a href="#" class="tile tile-lg bg-primary">BA</a>

<div class="tile tile-circle tile-lg"><span class="oi oi-person"></span></div>
<a href="#" class="tile tile-circle tile-lg bg-primary">BA</a>

<div class="tile tile-img">
  <img class="img-fluid" src="img.jpg" alt="Card image cap">
</div>
<a href="#" class="tile tile-img">
  <img class="img-fluid" src="img.jpg" alt="Card image cap">
</a>

Class References

.tile-circle: Apply to .tile to increase border radius to 100%.
.tile-img: Apply to .tile when use image instead of letter or icon.
.tile-lg: Apply to .tile to increate tile size to large.
.tile-sm: Apply to .tile to increate tile size to small.
.tile-xs: Apply to .tile to increate tile size to extra small.

Timeline

Displays each of the user’s upcoming, current, and past activities/events.

Project updated by Sara Carr

Sara Carr updated Online Store App to Online Store

at 3:21 AM

3:21am
Someone assigned you to a task

Angela Peterson assign Make lemonade from scratch to you

at 5:21pm

5:21pm

<ul class="timeline">
  <!-- .timeline-item -->
  <li class="timeline-item">
    <!-- .timeline-figure -->
    <div class="timeline-figure">
      <span class="tile tile-circle tile-sm"><i class="fa fa-cube fa-lg"></i></span>
    </div>
    <!-- /.timeline-figure -->

    <!-- .timeline-body -->
    <div class="timeline-body">
      <!-- .media -->
      <div class="media">
        <!-- .media-body -->
        <div class="media-body">
          <h6 class="timeline-heading">
            <a href="#" class="text-link">Project updated by Sara Carr</a>
          </h6>
          <p class="mb-0">
            <a href="#">Sara Carr</a> updated <strong>Online Store App</strong> to <a href="#">Online Store</a>
          </p>
          <p class="timeline-date d-sm-none">
            at 3:21 AM
          </p>
        </div>
        <!-- /.media-body -->

        <!-- .media-right -->
        <div class="d-none d-sm-block">
          <span class="timeline-date">3:21am</span>
        </div>
        <!-- /.media-right -->
      </div>
      <!-- /.media -->
    </div>
    <!-- /.timeline-body -->
  </li>
  <!-- /.timeline-item -->
</ul>

Class references

.timeline-reflow: Apply to .timeline to remove line tracker.

.timeline-dashed-line: Apply to .timeline to change line tracker style to dashed.

Visual picker

Radio buttons, checkboxes, or links that are visually enhanced.

Credit Card

Paypal

<div class="visual-picker has-peek">
  <input type="checkbox" id="visual-picker-01">
  <label class="visual-picker-figure" for="visual-picker-01">
    <span class="visual-picker-content">
      <span class="tile tile-lg bg-info">
        <i class="fa fa-credit-card"></i>
      </span>
    </span>
  </label>

  <span class="visual-picker-peek">Peek Text</span>
</div>

Class references

.has-peek: Apply to .visual-picker to add padding bottom that give space for text peek.
.visual-picker-fluid: Apply to .visual-picker to increase visual picker width to 100%.
.visual-picker-lg: Apply to .visual-picker to increase visual picker size to large.
.visual-picker-sm: Apply to .visual-picker to decrease visual picker size to small.

Looper Components

Avatar

Behavior

Avatar Group

Conversation

Expansion cards

Feeds

Expanding Your Home Network’s Reach

Figures

Simple figure

Hoverable figure

Figure tools

Icons

Use with button

List Icons

Metrics

Teams

Teams

Metrics Group & Nesting

Teams

Projects

Active Tasks

Publisher

Steps

Progress List

Sticker

Tasks

Task title

Issue Title

03:11 / 6:00 · Apr 07

Tiles

Timeline

Project updated by Sara Carr

Someone assigned you to a task

Visual picker