Adminkit Components

Discover 1 components available in Adminkit

Section Project

Component from Adminkit Builder
<div class="row removable">
  <div class="col-md-4 drop-zone">
    <div class="card mb-3 draggable">
      <img src="https://images.unsplash.com/photo-1527219525722-f9767a7f2884?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjl8fHByb2plY3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Slack</h5>
        <p class="card-text">This project is about integrating a new chat system to slack platform.</p>
        <a href="#" class="badge bg-info me-1 my-1">IOS App</a>
        <a href="#" class="badge bg-primary me-1 my-1">Desktop App</a>
      </div>
      <div class="card-footer">
        <div class="mb-1 d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file align-middle me-2">
            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
            <polyline points="13 2 13 9 20 9"></polyline>
          </svg>
          <span>Attach file</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8 drop-zone">
    <div class="card draggable">
      <div class="card-header">
        <h5 class="card-title mb-0">Activities</h5>
      </div>
      <div class="card-body h-100">
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
          <div class="flex-grow-1">
            <small class="float-end text-navy">5m ago</small>
            <strong>Vanessa Tucker</strong> added 2 new files to <strong>Loopple Update</strong>
            <br>
            <small class="text-muted">Today 7:51 pm</small>
            <br>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
          <div class="flex-grow-1">
            <small class="float-end text-navy">30m ago</small>
            <strong>Charles Hall</strong> added a new comment to <strong>AdminKit</strong>#&39;s v2.9.1 Update <br>
            <small class="text-muted">Today 7:21 pm</small>
            <div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
            <a href="#" class="btn btn-sm btn-info mt-1">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag align-middle me-2">
                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                <line x1="7" y1="7" x2="7.01" y2="7"></line>
              </svg> View more </a>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
          <div class="flex-grow-1">
            <small class="float-end text-navy">1h ago</small>
            <strong>Christina Mason</strong> finished tasks <br>
            <small class="text-muted">Today 6:35 pm</small>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-start">
          <img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
          <div class="flex-grow-1">
            <small class="float-end text-navy">3h ago</small>
            <strong>William Harris</strong> posted three updates on <strong>Slack code refactoring</strong>
            <br>
            <small class="text-muted">Today 5:12 pm</small>
            <ul>
              <li class="nav-item"> Fix channels new messages loading error </li>
              <li class="nav-item"> Added view last 100 messages option </li>
            </ul>
            <a href="#" class="btn btn-sm btn-info mt-1">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag align-middle me-2">
                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                <line x1="7" y1="7" x2="7.01" y2="7"></line>
              </svg> View more </a>
          </div>
        </div>
        <hr>
        <div class="d-grid">
          <a href="#" class="btn btn-primary">Load more</a>
        </div>
      </div>
    </div>
  </div>
</div>