Informative Blocks - List

List style of informative blocks/components.

List #1

                  
                    <!-- Card --> <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
                      <div class="card-body p-4">
                        <span class="row justify-content-sm-between align-items-sm-center">
                          <span class="col-sm-6 mb-2 mb-sm-0">
                            Business Strategy Manager
                          </span>
                          <span class="col-sm-6 text-primary text-sm-right">
                            Chicago, US
                            <span class="fas fa-arrow-right small ml-2"></span>
                          </span>
                        </span>
                      </div>
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
                      <div class="card-body p-4">
                        <span class="row justify-content-sm-between align-items-sm-center">
                          <span class="col-sm-6 mb-2 mb-sm-0">
                            Business Strategy Senior Associate
                          </span>
                          <span class="col-sm-6 text-primary text-sm-right">
                            New York, US
                            <span class="fas fa-arrow-right small ml-2"></span>
                          </span>
                        </span>
                      </div>
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
                      <div class="card-body p-4">
                        <span class="row justify-content-sm-between align-items-sm-center">
                          <span class="col-sm-6 mb-2 mb-sm-0">
                            Senior Analyst, Data Analytics
                          </span>
                          <span class="col-sm-6 text-primary text-sm-right">
                            Sydney, Australia
                            <span class="fas fa-arrow-right small ml-2"></span>
                          </span>
                        </span>
                      </div>
                    </a>
                    <!-- End Card -->
                  
                

List #2

Image Description

Mapbox

The time has come to bring those ideas and plans to life.

Members

Budget

$9,145

Priority

Medium
                  
                    <!-- Projects -->
                    <div class="card">
                      <div class="card-body p-5">
                        <!-- List of Icons -->
                        <div class="row justify-content-between align-items-center mb-3">
                          <div class="col-6">
                            <a class="small text-secondary" href="#">
                              <span class="fas fa-bookmark text-primary mr-1"></span>
                              FR-52
                            </a>
                          </div>
                          <div class="col-6 text-right">
                            <!-- Settings -->
                            <div class="position-relative">
                              <a id="settingsDropdown1InvokerExample1" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
                                 aria-controls="settingsDropdown1"
                                 aria-haspopup="true"
                                 aria-expanded="false"
                                 data-unfold-event="click"
                                 data-unfold-target="#settingsDropdown1"
                                 data-unfold-type="css-animation"
                                 data-unfold-duration="300"
                                 data-unfold-delay="300"
                                 data-unfold-hide-on-scroll="true"
                                 data-unfold-animation-in="slideInUp"
                                 data-unfold-animation-out="fadeOut">
                                <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                              </a>

                              <div id="settingsDropdown1" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="settingsDropdown1InvokerExample1" style="min-width: 160px;">
                                <a class="dropdown-item" href="#">
                                  <small class="fas fa-cogs dropdown-item-icon"></small>
                                  Settings
                                </a>
                                <a class="dropdown-item" href="#">
                                  <small class="fas fa-code-branch dropdown-item-icon"></small>
                                  Repository
                                </a>
                                <a class="dropdown-item" href="#">
                                  <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                                  Download
                                </a>
                                <a class="dropdown-item" href="#">
                                  <small class="fas fa-archive dropdown-item-icon"></small>
                                  Archive
                                </a>
                              </div>
                            </div>
                            <!-- End Settings -->
                          </div>
                        </div>
                        <!-- End List of Icons -->

                        <!-- Details -->
                        <div class="d-sm-flex">
                          <div class="u-lg-avatar mb-3 mb-sm-0 mr-3">
                            <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
                          </div>

                          <div class="mr-3">
                            <!-- Title -->
                            <div class="mb-3">
                              <h3 class="h5 mb-1">Mapbox</h3>
                              <p class="font-size-1">The time has come to bring those ideas and plans to life.</p>
                            </div>
                            <!-- End Title -->

                            <div class="d-sm-flex align-items-sm-center">
                              <!-- Members List -->
                              <div class="mb-3 mb-sm-0 mr-4">
                                <h4 class="small font-weight-normal text-secondary mb-0">Members</h4>

                                <ul class="list-inline mb-0">
                                  <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
                                    <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                      <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                                    </div>
                                  </li>
                                  <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
                                    <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                      <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                                    </div>
                                  </li>
                                  <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                                    <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                      <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                                    </div>
                                  </li>
                                  <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                                    <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                      <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                                    </div>
                                  </li>
                                  <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
                                    <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                                      <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                                    </div>
                                  </li>
                                  <li class="list-inline-item ml-n3 mr-0">
                                    <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                                      <span class="btn-icon__inner">+3</span>
                                    </a>
                                  </li>
                                </ul>
                              </div>
                              <!-- End Members List -->

                              <!-- Budget -->
                              <div class="u-ver-divider u-ver-divider--none-sm pr-4 mb-3 mb-sm-0 mr-4">
                                <h4 class="small font-weight-normal text-secondary mb-0">Budget</h4>
                                <span class="text-dark">$9,145</span>
                              </div>
                              <!-- End Budget -->

                              <!-- Priority -->
                              <div class="mr-4">
                                <h4 class="small font-weight-normal text-secondary mb-0">Priority</h4>
                                <span class="fas fa-arrow-up text-warning small"></span>
                                <span class="text-dark">Medium</span>
                              </div>
                              <!-- End Priority -->
                            </div>
                          </div>
                        </div>
                        <!-- End Details -->
                      </div>
                    </div>
                    <!-- End Projects -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/js/components/hs.unfold.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of unfold component
                        $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
                      });
                    </script>
                  
                

List #3

                  
                    <!-- Contacts  -->
                    <div class="card mb-4">
                      <div class="card-header pt-4 pb-3 px-0 mx-4">
                        <h2 class="h6 mb-0">Contacts</h2>
                      </div>

                      <div class="card-body pt-3 pb-4 px-4">
                        <!-- User -->
                        <a class="d-flex align-items-start mb-4" href="#">
                          <div class="position-relative u-avatar">
                            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
                            <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-right rounded-circle"></span>
                          </div>

                          <div class="ml-3">
                            <span class="d-block text-dark">Patrick Garner</span>
                            <small class="d-block text-secondary">Web Developer</small>
                          </div>
                        </a>
                        <!-- End User -->

                        <!-- User -->
                        <a class="d-flex align-items-start mb-4" href="#">
                          <span class="btn btn-icon btn-soft-danger rounded-circle">
                            <span class="btn-icon__inner">AO</span>
                            <span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
                          </span>

                          <div class="ml-3">
                            <span class="d-block text-dark">Amanta Owens</span>
                            <small class="d-block text-secondary">UI/UX Designer</small>
                          </div>
                        </a>
                        <!-- End User -->

                        <!-- User -->
                        <a class="d-flex align-items-start mb-4" href="#">
                          <div class="position-relative u-avatar">
                            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            <span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
                          </div>

                          <div class="ml-3">
                            <span class="d-block text-dark">Eliza Donovan</span>
                            <small class="d-block text-secondary">Project Manager</small>
                          </div>
                        </a>
                        <!-- End User -->

                        <!-- User -->
                        <a class="d-flex align-items-start" href="#">
                          <span class="btn btn-icon btn-soft-success rounded-circle">
                            <span class="btn-icon__inner">JC</span>
                            <span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-right rounded-circle"></span>
                          </span>

                          <div class="ml-3">
                            <span class="d-block text-dark">James Collins</span>
                            <small class="d-block text-secondary">Angular Developer</small>
                          </div>
                        </a>
                        <!-- End User -->
                      </div>
                    </div>
                    <!-- End Contacts  -->
                  
                

List #4

                  
                    <!-- Team -->
                    <div class="card position-relative mb-5">
                      <div class="card-body position-relative p-3">
                        <div class="row align-items-center">
                          <div class="col-sm-7 mb-3 mb-sm-0">
                            <div class="d-flex">
                              <!-- Avatar -->
                              <div class="position-relative u-lg-avatar mr-3">
                                <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
                                <span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
                              </div>
                              <!-- End Avatar -->

                              <div class="mr-3">
                                <!-- User Info -->
                                <div class="mb-2">
                                  <h2 class="h6 mb-0">
                                    <a href="#">Patrick Garner</a>
                                  </h2>
                                  <a class="small" href="#">@patrickgarner</a>
                                </div>
                                <!-- End User Info -->

                                <!-- Social Networks -->
                                <ul class="list-inline mb-0">
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-facebook-f btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-google btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-twitter btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-github btn-icon__inner"></span>
                                    </a>
                                  </li>
                                </ul>
                                <!-- End Social Networks -->
                              </div>
                            </div>
                          </div>

                          <div class="col-sm-5 align-self-sm-end">
                            <!-- Button -->
                            <div class="text-sm-right">
                              <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                                <span class="far fa-envelope mr-2"></span>
                                Send a Message
                              </a>
                            </div>
                            <!-- End Button -->
                          </div>
                        </div>

                        <!-- Add to Favorites -->
                        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
                          <span class="far fa-star btn-icon__inner"></span>
                        </a>
                        <!-- End Add to Favorites -->
                      </div>
                    </div>
                    <!-- End Team -->

                    <!-- Team -->
                    <div class="card position-relative">
                      <div class="card-body p-3">
                        <div class="row align-items-center">
                          <div class="col-sm-7 mb-3 mb-sm-0">
                            <div class="d-flex">
                              <!-- Avatar -->
                              <span class="btn btn-lg btn-icon btn-soft-danger rounded-circle mr-3">
                                <span class="btn-icon__inner">AO</span>
                                <span class="badge badge-xs badge-outline-danger badge-pos badge-pos--bottom-left rounded-circle"></span>
                              </span>
                              <!-- End Avatar -->

                              <div class="mr-3">
                                <!-- User Info -->
                                <div class="mb-2">
                                  <h2 class="h6 mb-0">
                                    <a href="#">Amanta Owens</a>
                                  </h2>
                                  <a class="small" href="#">@uidesginer</a>
                                </div>
                                <!-- End User Info -->

                                <!-- Social Networks -->
                                <ul class="list-inline mb-0">
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-facebook-f btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-google btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-twitter btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item mr-0">
                                    <a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
                                      <span class="fab fa-github btn-icon__inner"></span>
                                    </a>
                                  </li>
                                </ul>
                                <!-- End Social Networks -->
                              </div>
                            </div>
                          </div>

                          <div class="col-sm-5 align-self-sm-end">
                            <!-- Button -->
                            <div class="text-sm-right">
                              <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                                <span class="far fa-envelope mr-2"></span>
                                Send a Message
                              </a>
                            </div>
                            <!-- End Button -->
                          </div>
                        </div>

                        <!-- Add to Favorites -->
                        <a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
                          <span class="far fa-star btn-icon__inner"></span>
                        </a>
                      </div>
                      <!-- End Add to Favorites -->
                    </div>
                    <!-- End Team -->
                  
                

List #5

Image Description

The role is responsible for designing, coding and modifying websites, from layout to function and according to a client's specifications. Strive to create visually appealing sites that feature user-friendly design and clear navigation.

Location

Liverpool, UK

Posted

1 day ago

Salary

35k - 45k
Fulltime
DB

Participates in all aspects of full life cycle application development including requirements gathering, technical design, iterative development, testing, implementation and on-going support.

Location

Leeds, UK

Posted

2 days ago

Salary

55k - 65k
Contract
                  
                    <!-- Info -->
                    <div class="card mb-5">
                      <div class="card-body p-4">
                        <!-- Details -->
                        <div class="media d-block d-sm-flex">
                          <div class="u-avatar mb-3 mb-sm-0 mr-4">
                            <img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
                          </div>

                          <div class="media-body">
                            <!-- Header -->
                            <div class="media mb-2">
                              <div class="media-body">
                                <h1 class="h5 mb-1">
                                  <a href="#">Senior Java Developer</a>
                                </h1>
                                <ul class="list-inline font-size-1 text-muted">
                                  <li class="list-inline-item">
                                    <a class="link-muted" href="#">
                                      <span class="fas fa-building mr-1"></span>
                                      Slack LLC
                                    </a>
                                  </li>
                                  <li class="list-inline-item text-muted">•</li>
                                  <li class="list-inline-item">Office</li>
                                </ul>
                              </div>

                              <div class="d-flex ml-auto">
                                <!-- Rating -->
                                <div class="position-relative d-inline-block mr-2">
                                  <a id="rating6DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
                                     aria-controls="rating6Dropdown"
                                     aria-haspopup="true"
                                     aria-expanded="false"
                                     data-unfold-event="hover"
                                     data-unfold-target="#rating6Dropdown"
                                     data-unfold-type="css-animation"
                                     data-unfold-duration="300"
                                     data-unfold-delay="300"
                                     data-unfold-hide-on-scroll="true"
                                     data-unfold-animation-in="slideInUp"
                                     data-unfold-animation-out="fadeOut">
                                    4.5
                                  </a>

                                  <div id="rating6Dropdown" class="dropdown-menu dropdown-menu-right dropdown-unfold p-3" aria-labelledby="rating6DropdownInvoker" style="width: 190px;">
                                    <div class="d-flex align-items-center mb-2">
                                      <span class="text-warning mr-2">4.5</span>
                                      <ul class="list-inline mb-0">
                                        <li class="list-inline-item text-warning">
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star-half-alt"></span>
                                        </li>
                                      </ul>
                                    </div>

                                    <p class="text-dark mb-0">Overal Rating</p>
                                    <p class="mb-0">Based on 132 reviews</p>
                                  </div>
                                </div>
                                <!-- End Rating -->

                                <!-- Bookmark -->
                                <div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save Job">
                                  <input type="checkbox" class="bookmark-checkbox-input" id="bookmark4">
                                  <label class="bookmark-checkbox-label" for="bookmark4"></label>
                                </div>
                                <!-- End Bookmark -->
                              </div>
                            </div>
                            <!-- End Header -->

                            <div class="mb-5">
                              <p>The role is responsible for designing, coding and modifying websites, from layout to function and according to a client's specifications. Strive to create visually appealing sites that feature user-friendly design and clear navigation.</p>
                            </div>

                            <div class="d-md-flex align-items-md-center">
                              <!-- Location -->
                              <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
                                <h2 class="small text-secondary mb-0">Location</h2>
                                <small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
                                <span class="align-middle">Liverpool, UK</span>
                              </div>
                              <!-- End Location -->

                              <!-- Posted -->
                              <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
                                <h3 class="small text-secondary mb-0">Posted</h3>
                                <small class="fas fa-calendar-alt text-secondary align-middle mr-1"></small>
                                <span class="align-middle">1 day ago</span>
                              </div>
                              <!-- End Posted -->

                              <!-- Posted -->
                              <div class="mb-3 mb-md-0">
                                <h4 class="small text-secondary mb-0">Salary</h4>
                                <small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
                                <span class="align-middle">35k - 45k</span>
                              </div>
                              <!-- End Posted -->

                              <div class="ml-md-auto">
                                <span class="btn btn-xs btn-soft-danger btn-pill">Fulltime</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Details -->
                      </div>
                    </div>
                    <!-- End Info -->

                    <!-- Info -->
                    <div class="card mb-5">
                      <div class="card-body p-4">
                        <!-- Details -->
                        <div class="media d-block d-sm-flex">
                          <span class="btn btn-icon btn-soft-primary rounded-circle mb-3 mb-sm-0 mr-4">
                            <span class="btn-icon__inner">DB</span>
                          </span>

                          <div class="media-body">
                            <!-- Header -->
                            <div class="media mb-2">
                              <div class="media-body">
                                <h3 class="h5 mb-1">
                                  <a href="#">Channel Sales Director</a>
                                </h3>
                                <ul class="list-inline font-size-1 text-muted">
                                  <li class="list-inline-item">
                                    <a class="link-muted" href="#">
                                      <span class="fas fa-building mr-1"></span>
                                      Dropbox
                                    </a>
                                  </li>
                                  <li class="list-inline-item text-muted">•</li>
                                  <li class="list-inline-item">Remote</li>
                                </ul>
                              </div>

                              <div class="d-flex ml-auto">
                                <!-- Rating -->
                                <div class="position-relative d-inline-block mr-2">
                                  <a id="rating7DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
                                     aria-controls="rating7Dropdown"
                                     aria-haspopup="true"
                                     aria-expanded="false"
                                     data-unfold-event="hover"
                                     data-unfold-target="#rating7Dropdown"
                                     data-unfold-type="css-animation"
                                     data-unfold-duration="300"
                                     data-unfold-delay="300"
                                     data-unfold-hide-on-scroll="true"
                                     data-unfold-animation-in="slideInUp"
                                     data-unfold-animation-out="fadeOut">
                                    4.7
                                  </a>

                                  <div id="rating7Dropdown" class="dropdown-menu dropdown-menu-right dropdown-unfold p-3" aria-labelledby="rating7DropdownInvoker" style="width: 190px;">
                                    <div class="d-flex align-items-center mb-2">
                                      <span class="text-warning mr-2">4.7</span>
                                      <ul class="list-inline mb-0">
                                        <li class="list-inline-item text-warning">
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star"></span>
                                          <span class="fas fa-star-half-alt"></span>
                                        </li>
                                      </ul>
                                    </div>

                                    <p class="text-dark mb-0">Overal Rating</p>
                                    <p class="mb-0">Based on 120 reviews</p>
                                  </div>
                                </div>
                                <!-- End Rating -->

                                <!-- Bookmark -->
                                <div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save Job">
                                  <input type="checkbox" class="bookmark-checkbox-input" id="bookmark5">
                                  <label class="bookmark-checkbox-label" for="bookmark5"></label>
                                </div>
                                <!-- End Bookmark -->
                              </div>
                            </div>
                            <!-- End Header -->

                            <div class="mb-5">
                              <p>Participates in all aspects of full life cycle application development including requirements gathering, technical design, iterative development, testing, implementation and on-going support.</p>
                            </div>

                            <div class="d-md-flex align-items-md-center">
                              <!-- Location -->
                              <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
                                <h4 class="small text-secondary mb-0">Location</h4>
                                <small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
                                <span class="align-middle">Leeds, UK</span>
                              </div>
                              <!-- End Location -->

                              <!-- Posted -->
                              <div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
                                <h4 class="small text-secondary mb-0">Posted</h4>
                                <small class="fas fa-calendar-alt text-secondary align-middle mr-1"></small>
                                <span class="align-middle">2 days ago</span>
                              </div>
                              <!-- End Posted -->

                              <!-- Posted -->
                              <div class="mb-3 mb-md-0">
                                <h4 class="small text-secondary mb-0">Salary</h4>
                                <small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
                                <span class="align-middle">55k - 65k</span>
                              </div>
                              <!-- End Posted -->

                              <div class="ml-md-auto">
                                <span class="btn btn-xs btn-soft-danger btn-pill">Contract</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Details -->
                      </div>
                    </div>
                    <!-- End Info -->
                  
                

List #6

Image Description

UI and UX designer

4.91 (12k+ reviews)
Viewed 3,910 times
                  
                    <!-- Hero Section -->
                    <div class="container">
                      <div class="border-bottom space-top-2">
                        <div class="media mb-5">
                          <!-- Avatar -->
                          <div class="u-lg-avatar mr-4">
                            <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
                          </div>
                          <!-- End Avatar -->

                          <div class="media-body">
                            <div class="row">
                              <div class="col-lg-6 mb-3 mb-lg-0">
                                <h1 class="h4 mb-1">UI and UX designer</h1>

                                <!-- Review -->
                                <span class="text-warning font-size-1">
                                  <span class="fas fa-star"></span>
                                  <span class="fas fa-star"></span>
                                  <span class="fas fa-star"></span>
                                  <span class="fas fa-star"></span>
                                  <span class="fas fa-star"></span>
                                </span>
                                <span class="font-weight-semi-bold ml-2">4.91</span>
                                <small class="text-muted">(12k+ reviews)</small>
                                <!-- End Review -->
                              </div>

                              <div class="col-lg-6 text-lg-right">
                                <div class="d-flex justify-content-md-end align-items-center">
                                  <!-- Bookmark -->
                                  <div class="d-inline-block mr-2">
                                    <div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save this job">
                                      <input type="checkbox" class="bookmark-checkbox-input" id="bookmark11">
                                      <label class="bookmark-checkbox-label" for="bookmark11"></label>
                                    </div>
                                  </div>
                                  <!-- End Bookmark -->

                                  <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">Apply On Company Site</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <!-- Viewed Info -->
                        <div class="space-bottom-1">
                          <div class="small text-right text-secondary">
                            <span class="fas fa-eye mr-1"></span>
                            Viewed 3,910 times
                          </div>
                        </div>
                        <!-- End Viewed Info -->
                      </div>
                    </div>
                    <!-- End Hero Section -->
                  
                

List #7

                  
                    <!-- Hiring Section -->
                    <div class="container space-2">
                      <div class="w-lg-75 mx-lg-auto mb-7">
                        <!-- Card -->
                        <a class="card card-text-dark transition-3d-hover p-4 mb-3" href="#">
                          <div class="row align-items-center">
                            <div class="col-10">
                              <div class="row align-items-center">
                                <div class="col-sm-7">
                                  <h4 class="h6 mb-0">Business Strategy Manager</h4>
                                </div>
                                <div class="col-sm-5">
                                  <span class="text-secondary">New York, US / Remote</span>
                                </div>
                              </div>
                            </div>
                            <div class="col-2 text-right">
                              <small class="fas fa-arrow-right text-primary"></small>
                            </div>
                          </div>
                        </a>
                        <!-- End Card -->

                        <!-- Card -->
                        <a class="card card-text-dark transition-3d-hover p-4 mb-3" href="#">
                          <div class="row align-items-center">
                            <div class="col-10">
                              <div class="row align-items-center">
                                <div class="col-sm-7">
                                  <h4 class="h6 mb-0">Engineering Manager</h4>
                                </div>
                                <div class="col-sm-5">
                                  <span class="text-secondary">New York, US / Remote</span>
                                </div>
                              </div>
                            </div>
                            <div class="col-2 text-right">
                              <small class="fas fa-arrow-right text-primary"></small>
                            </div>
                          </div>
                        </a>
                        <!-- End Card -->

                        <!-- Card -->
                        <a class="card card-text-dark transition-3d-hover p-4 mb-3" href="#">
                          <div class="row align-items-center">
                            <div class="col-10">
                              <div class="row align-items-center">
                                <div class="col-sm-7">
                                  <h4 class="h6 mb-0">Senior Analyst, Data Analytics</h4>
                                </div>
                                <div class="col-sm-5">
                                  <span class="text-secondary">New York, US / Remote</span>
                                </div>
                              </div>
                            </div>
                            <div class="col-2 text-right">
                              <small class="fas fa-arrow-right text-primary"></small>
                            </div>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>

                      <!-- Link -->
                      <div class="text-center">
                        <a href="../pages/careers.html">
                          <span class="text-secondary">View all</span>
                          <span class="btn btn-icon btn-sm btn-soft-primary rounded-circle mx-2">
                            <span class="fas fa-angle-right btn-icon__inner"></span>
                          </span>
                          <span class="text-secondary">careers</span>
                        </a>
                      </div>
                      <!-- End Link -->
                    </div>
                    <!-- End Hiring Section -->