List

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

Share team inboxes
Deliver instant answers
Manage your team with reports

<div class="max-w-lg">
  <ul class="list-icon">
    <li class="list-icon-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="list-icon-marker"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.06l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
      Share team inboxes
    </li>
    <li class="list-icon-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="list-icon-marker"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.06l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
      Deliver instant answers
    </li>
    <li class="list-icon-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="list-icon-marker"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.06l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
      Manage your team with reports
    </li>
  </ul>
</div>

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.

<div class="max-w-lg">
  <ul class="list-bordered">
    <li class="list-bordered-item">
      <h4 class="h5">Share team inboxes</h4>
      <p class="text-sm text-secondary-400">Whether you have a team of 2 or 200, our shared inboxes keep everyone on the same page.</p>
    </li>
    <li class="list-bordered-item">
      <h4 class="h5">Deliver instant answers</h4>
      <p class="text-sm text-secondary-400">An all-in-one customer service platform that helps you balance everything.</p>
    </li>
    <li class="list-bordered-item">
      <h4 class="h5">Manage your team with reports</h4>
      <p class="text-sm text-secondary-400">Measure what matters with easy-to-use reports.</p>
    </li>
  </ul>
</div>

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.

<div class="max-w-2xl space-y-8">
  <div>
    <p class="text-xs font-mono text-secondary-400 mb-2">.media (top-aligned)</p>
    <div class="media">
      <img class="media-img" src="https://i.pravatar.cc/96?img=12" alt="" />
      <div class="media-body">
        <h4 class="h5">Sarah Connor</h4>
        <p class="mt-1 text-sm text-secondary-400">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.</p>
      </div>
    </div>
  </div>
  <div>
    <p class="text-xs font-mono text-secondary-400 mb-2">.media .media-center (vertically centered)</p>
    <div class="media media-center">
      <img class="media-img" src="https://i.pravatar.cc/96?img=15" alt="" />
      <div class="media-body">
        <h4 class="h5">John Doe</h4>
        <p class="mt-1 text-sm text-secondary-400">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.</p>
      </div>
    </div>
  </div>
  <div>
    <p class="text-xs font-mono text-secondary-400 mb-2">.media .media-bottom (bottom-aligned)</p>
    <div class="media media-bottom">
      <img class="media-img" src="https://i.pravatar.cc/96?img=18" alt="" />
      <div class="media-body">
        <h4 class="h5">Jane Smith</h4>
        <p class="mt-1 text-sm text-secondary-400">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.</p>
      </div>
    </div>
  </div>
  <div>
    <p class="text-xs font-mono text-secondary-400 mb-2">.media-img .media-img-lg (64px image)</p>
    <div class="media media-center">
      <img class="media-img media-img-lg" src="https://i.pravatar.cc/128?img=20" alt="" />
      <div class="media-body">
        <h4 class="h5">Mike Johnson</h4>
        <p class="mt-1 text-sm text-secondary-400">Using .media-img .media-img-lg for a larger avatar. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</div>

Divider

Content above

OR

Content below

Section one

Section two

<div class="max-w-md space-y-4">
  <p class="text-sm text-secondary-500">Content above</p>
  <div class="divider"><span class="divider-text">OR</span></div>
  <p class="text-sm text-secondary-500">Content below</p>

  <p class="mt-6 text-sm text-secondary-500">Section one</p>
  <hr class="divider-line" />
  <p class="text-sm text-secondary-500">Section two</p>
</div>