Info blocks

Different style of info blocks/components.

Info #1

.u-info-v1 class has a few CSS styles along with transition effect on hover.

              
                <ul class="list-unstyled mb-0">
                  <li class="my-2">
                    <a class="u-info-v1 p-4" href="#">
                      <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="fa fa-arrow-right small ml-2"></span>
                        </span>
                      </span>
                    </a>
                  </li>

                  <li class="my-2">
                    <a class="u-info-v1 p-4" href="#">
                      <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="fa fa-arrow-right small ml-2"></span>
                        </span>
                      </span>
                    </a>
                  </li>

                  <li class="my-2">
                    <a class="u-info-v1 p-4" href="#">
                      <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="fa fa-arrow-right small ml-2"></span>
                        </span>
                      </span>
                    </a>
                  </li>
                </ul>

Info v2 - Listing

Image Description

Senior Java Developer

London, UK
Image Description

Junior UX Designer

Manchester, UK
Image Description

Product Director

New York, NY 
              
                <div class="card-group d-block d-lg-flex u-card--gutters-2-lg">
                  <div class="card bg-transparent border-0 mb-3 mb-lg-0">
                    <!-- Job Listing -->
                    <a class="card-body info-v2 bg-white rounded transition-3d-hover p-4" href="#">
                      <div class="media">
                        <div class="d-flex">
                          <img class="u-avatar rounded" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                        </div>
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Senior Java Developer</h4>
                          <small class="d-block text-muted">London, UK</small>
                        </div>
                      </div>
                    </a>
                    <!-- End Job Listing -->
                  </div>

                  <div class="card bg-transparent border-0 mb-3 mb-lg-0">
                    <!-- Job Listing -->
                    <a class="card-body info-v2 bg-white rounded transition-3d-hover p-4" href="#">
                      <div class="media">
                        <div class="d-flex">
                          <img class="u-avatar rounded" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                        </div>
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Junior UX Designer</h4>
                          <small class="d-block text-muted">Manchester, UK</small>
                        </div>
                      </div>
                    </a>
                    <!-- End Job Listing -->
                  </div>

                  <div class="card bg-transparent border-0">
                    <!-- Job Listing -->
                    <a class="card-body info-v2 bg-white rounded transition-3d-hover p-4" href="#">
                      <div class="media">
                        <div class="d-flex">
                          <img class="u-avatar rounded" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                        </div>
                        <div class="media-body px-4">
                          <h4 class="h6 text-dark mb-1">Product Director</h4>
                          <small class="d-block text-muted">New York, NY</small>
                        </div>
                      </div>
                    </a>
                    <!-- End Job Listing -->
                  </div>
                </div>

Info v2 - Grid

Image Description

IT business manager

London, UK

View Details
Image Description

Membership director

Manchester, UK

View Details
Image Description

UI/UX designer

New York, NY

View Details 
              
                <div class="card-group d-block d-lg-flex u-card--gutters-4-lg">
                  <div class="card bg-transparent border-0 mb-5 mb-lg-0">
                    <!-- Job Listing -->
                    <div class="card-body info-v2 bg-white text-center rounded transition-3d-hover p-6">
                      <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                      <div class="mb-4">
                        <h4 class="h6 mb-1">IT business manager</h4>
                        <p>London, UK</p>
                      </div>
                      <a class="btn btn-sm u-btn-primary--air u-btn-wide" href="#">View Details</a>
                    </div>
                    <!-- End Job Listing -->
                  </div>

                  <div class="card bg-transparent border-0 mb-5 mb-lg-0">
                    <!-- Job Listing -->
                    <div class="card-body info-v2 bg-white text-center rounded transition-3d-hover p-6">
                      <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                      <div class="mb-4">
                        <h4 class="h6 mb-1">Membership director</h4>
                        <p>Manchester, UK</p>
                      </div>
                      <a class="btn btn-sm u-btn-primary--air u-btn-wide" href="#">View Details</a>
                    </div>
                    <!-- End Job Listing -->
                  </div>

                  <div class="card bg-transparent border-0">
                    <!-- Job Listing -->
                    <div class="card-body info-v2 bg-white text-center rounded transition-3d-hover p-6">
                      <img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                      <div class="mb-4">
                        <h4 class="h6 mb-1">UI/UX designer</h4>
                        <p>New York, NY</p>
                      </div>
                      <a class="btn btn-sm u-btn-primary--air u-btn-wide" href="#">View Details</a>
                    </div>
                    <!-- End Job Listing -->
                  </div>
                </div>