List

With icons — .list-icon + .list-icon-item + .list-icon-marker

Share team inboxes
Deliver instant answers
Manage your team with reports

<ul class="list-icon">
  <li class="list-icon-item">
    <svg class="list-icon-marker">...</svg>
    Share team inboxes
  </li>
  <li class="list-icon-item">
    <svg class="list-icon-marker">...</svg>
    Deliver instant answers
  </li>
  <li class="list-icon-item">
    <svg class="list-icon-marker">...</svg>
    Manage your team with reports
  </li>
</ul>

Bordered — .list-bordered + .list-bordered-item

Share team inboxes

Whether you have a team of 2 or 200, our shared inboxes keep everyone on the same page.
Deliver instant answers

An all-in-one customer service platform that helps you balance everything.
Manage your team with reports

Measure what matters with easy-to-use reports.

<ul class="list-bordered">
  <li class="list-bordered-item">
    <h4 class="h5">Title</h4>
    <p class="text-sm text-secondary-400">Description</p>
  </li>
  <li class="list-bordered-item">
    <h4 class="h5">Title</h4>
    <p class="text-sm text-secondary-400">Description</p>
  </li>
  <li class="list-bordered-item">
    <h4 class="h5">Title</h4>
    <p class="text-sm text-secondary-400">Description</p>
  </li>
</ul>

Media Object

Image + text. Align with .media .media-center or .media .media-bottom.

.media (top-aligned)

Sarah Connor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

.media .media-center (vertically centered)

John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

.media .media-bottom (bottom-aligned)

Jane Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

.media-img .media-img-lg (64px image)

Mike Johnson

Using .media-img .media-img-lg for a larger avatar. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<!-- Top aligned -->
<div class="media">
  <img class="media-img" src="avatar.jpg" alt="" />
  <div class="media-body">
    <h4 class="h5">Name</h4>
    <p class="text-sm text-secondary-400">Description</p>
  </div>
</div>

<!-- Center aligned -->
<div class="media media-center">...</div>

<!-- Bottom aligned -->
<div class="media media-bottom">...</div>

<!-- Image sizes: media-img (48px), media-img media-img-lg (64px) -->

Divider

Content above

OR

Content below

Section one

Section two

<!-- Text divider -->
<div class="divider">
  <span class="divider-text">OR</span>
</div>

<!-- Simple line -->
<hr class="divider-line" />