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 #1
<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 u-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 u-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 u-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 - Listing #2
<div class="card-deck d-block d-lg-flex">
<!-- Card -->
<div class="card u-info-v2 mb-3">
<a class="card-body p-4" href="#">
<div class="media align-items-center">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/160x160/img5.jpg" alt="Image Description">
<div class="media-body">
<span class="text-dark">Spotify</span>
<small class="d-block text-secondary">Logo redesign</small>
</div>
<div class="media-body text-right">
<span class="text-primary ml-3">
$1,903
</span>
</div>
</div>
</a>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-info-v2 mb-3">
<a class="card-body p-4" href="#">
<div class="media align-items-center">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/160x160/img3.jpg" alt="Image Description">
<div class="media-body">
<span class="text-dark">Slack</span>
<small class="d-block text-secondary">Page redesign</small>
</div>
<div class="media-body text-right">
<span class="text-primary ml-3">
$3,500
</span>
</div>
</div>
</a>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-info-v2 mb-3">
<a class="card-body p-4" href="#">
<div class="media align-items-center">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/160x160/img6.jpg" alt="Image Description">
<div class="media-body">
<span class="text-dark">Dropbox</span>
<small class="d-block text-secondary">Branding</small>
</div>
<div class="media-body text-right">
<span class="text-primary ml-3">
$7,250
</span>
</div>
</div>
</a>
</div>
<!-- End Card -->
</div>
Info v3 - Listing #3
Work experience
Jul 2018
Senior Frontend Developer
at Google - SF, US
Aug 2016 - Jul 2018
Junior Frontend Developer
at Slack Inc - London, UKEducation
Sep 2009 - June 2013
BS in Computer Science
Harvard University
Sep 2014 - June 2016
MBA in Marketing
University of British Columbia
<!-- Info -->
<div class="row">
<div class="col-md-6 mb-7 mb-md-0">
<!-- Title -->
<div class="mb-3">
<h3 class="h6 mb-0">Work experience</h3>
</div>
<!-- End Title -->
<!-- Info -->
<div class="d-flex mb-5">
<img class="u-avatar align-self-center mr-4" src="../assets/img/160x160/img17.png" alt="Image Description">
<div>
<small class="d-block text-secondary">Jul 2018</small>
<h4 class="h6 mb-0">Senior Frontend Developer</h4>
<span class="d-block text-secondary">at Google - SF, US</span>
</div>
</div>
<!-- End Info -->
<!-- Info -->
<div class="d-flex">
<img class="u-avatar align-self-center mr-4" src="../assets/img/160x160/img14.png" alt="Image Description">
<div>
<small class="d-block text-secondary">Aug 2016 - Jul 2018</small>
<h4 class="h6 mb-0">Junior Frontend Developer</h4>
<span class="d-block text-secondary">at Slack Inc - London, UK</span>
</div>
</div>
<!-- End Info -->
</div>
<div class="col-md-6 mb-3 mb-md-0">
<!-- Title -->
<div class="mb-3">
<h3 class="h6 mb-0">Education</h3>
</div>
<!-- End Title -->
<!-- Info -->
<div class="row align-items-center mb-5">
<div class="col-4">
<img class="img-fluid" src="../assets/img/logos/harvard-university.png" alt="Image Description">
</div>
<div class="col-8">
<small class="d-block text-secondary">Sep 2009 - June 2013</small>
<h4 class="h6 mb-0">BS in Computer Science</h4>
<span class="d-block text-secondary">Harvard University</span>
</div>
</div>
<!-- End Info -->
<!-- Info -->
<div class="row align-items-center">
<div class="col-4">
<img class="img-fluid" src="../assets/img/logos/ubc.png" alt="Image Description">
</div>
<div class="col-8">
<small class="d-block text-secondary">Sep 2014 - June 2016</small>
<h4 class="h6 mb-0">MBA in Marketing</h4>
<span class="d-block text-secondary">University of British Columbia</span>
</div>
</div>
<!-- End Info -->
</div>
</div>
<!-- End Info -->
Info v4 - Listing #4
HTML:
<!-- Projects -->
<div class="card p-5 mb-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="fa fa-bookmark text-primary mr-1"></span>
FR-52
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdownListing1Invoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdownListing1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdownListing1"
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="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="settingsDropdownListing1" class="u-unfold right-0 text-left pl-2 mt-2" aria-labelledby="settingsDropdownListing1Invoker" style="min-width: 160px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-6 text-center font-size-13"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-code-branch min-width-6 text-center font-size-13"></span>
Repository
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-6 text-center font-size-13"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-6 text-center font-size-13"></span>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<!-- Details -->
<div class="d-sm-flex">
<img class="u-lg-avatar rounded-circle mb-3 mb-sm-0 mr-3" src="../assets/img/160x160/img4.jpg" alt="Image Description">
<div class="mr-3">
<!-- Title -->
<div class="mb-3">
<h3 class="h5 mb-1">Mapbox</h3>
<p class="font-size-14">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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0">
<a class="u-icon u-icon-light u-icon--sm rounded-circle" href="#">
<span class="u-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="fa fa-arrow-up text-warning font-size-13"></span>
<span class="text-dark">Medium</span>
</div>
<!-- End Priority -->
</div>
</div>
</div>
<!-- End Details -->
</div>
<!-- End Projects -->
<!-- Projects -->
<div class="card p-5 mb-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="fa fa-bookmark text-primary mr-1"></span>
FR-13
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdownListing2Invoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdownListing2"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdownListing2"
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="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="settingsDropdownListing2" class="u-unfold right-0 text-left pl-2 mt-2" aria-labelledby="settingsDropdownListing2Invoker" style="min-width: 160px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-6 text-center font-size-13"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-code-branch min-width-6 text-center font-size-13"></span>
Repository
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-6 text-center font-size-13"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-6 text-center font-size-13"></span>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<!-- Details -->
<div class="d-flex">
<img class="u-lg-avatar rounded-circle mr-3" src="../assets/img/160x160/img3.jpg" alt="Image Description">
<div class="mr-3">
<!-- Title -->
<div class="mb-3">
<h3 class="h5 mb-1">Slack</h3>
<p class="font-size-14">Using our creative gifts drives this foundation.</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="Josephina Mack">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0">
<a class="u-icon u-icon-light u-icon--sm rounded-circle" href="#">
<span class="u-icon__inner">+1</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">$3,120</span>
</div>
<!-- End Budget -->
<!-- Priority -->
<div class="mr-4">
<h4 class="small font-weight-normal text-secondary mb-0">Priority</h4>
<span class="fa fa-arrow-down text-success font-size-13"></span>
<span class="text-dark">Low</span>
</div>
<!-- End Priority -->
</div>
</div>
</div>
<!-- End Details -->
</div>
<!-- End Projects -->
JS library and initialization:
<!-- 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>
Info v5 - Listing #5
HTML:
<div class="card-deck d-block d-md-flex">
<!-- Friends List -->
<a class="card u-info-v2 mb-3" href="#">
<div class="card-body p-3">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img9.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">Patrick Garner</h4>
<span>Refer</span>
</div>
</div>
</div>
</a>
<!-- End Friends List -->
<!-- Friends List -->
<a class="card u-info-v2 mb-3" href="#">
<div class="card-body p-3">
<div class="media">
<span class="u-icon u-icon-primary--air u-icon--md rounded-circle mr-3">
<span class="u-icon__inner">CB</span>
</span>
<div class="media-body">
<h4 class="h6 text-dark mb-0">Cameron Brown</h4>
<span>Refer</span>
</div>
</div>
</div>
</a>
<!-- End Friends List -->
<!-- Friends List -->
<a class="card u-info-v2 mb-3" href="#">
<div class="card-body p-3">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img8.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 text-dark mb-0">Sebastian Diaz</h4>
<span>Refer</span>
</div>
</div>
</div>
</a>
<!-- End Friends List -->
</div>
Info v2 - Grid #1
<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 u-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 u-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 u-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>
Info v2 - Grid #2
HTML:
<div class="card-deck d-block d-md-flex">
<!-- Projects -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- List of Icons -->
<div class="row justify-content-between align-items-center mb-4">
<div class="col-6">
<a class="small text-secondary" href="#">
<span class="fa fa-bookmark text-primary mr-1"></span>
FR-52
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdown1Invoker" class="u-icon u-icon-secondary--air u-icon--sm u-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="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="settingsDropdown1" class="u-unfold right-0 text-left pl-2 mt-2" aria-labelledby="settingsDropdown1Invoker" style="min-width: 160px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-6 text-center font-size-13"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-code-branch min-width-6 text-center font-size-13"></span>
Repository
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-6 text-center font-size-13"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-6 text-center font-size-13"></span>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<div class="text-center">
<img class="u-lg-avatar rounded-circle mx-auto mb-3" src="../assets/img/160x160/img4.jpg" alt="Image Description">
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">Mapbox</h3>
<p class="font-size-14">The time has come to bring those ideas and plans to life.</p>
</div>
<!-- End Title -->
<h4 class="h6 font-weight-normal mb-1">Members</h4>
<!-- Members List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Patrick Garner">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0">
<a class="u-icon u-icon-light u-icon--sm rounded-circle" href="#">
<span class="u-icon__inner">+3</span>
</a>
</li>
</ul>
<!-- End Members List -->
</div>
</div>
<div class="card-footer text-center">
<!-- Budget & Priority -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
<span class="text-dark">$9,145</span>
</div>
<div class="col-6">
<h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
<span class="fa fa-arrow-up text-warning font-size-13"></span>
<span class="text-dark">Medium</span>
</div>
</div>
<!-- End Budget & Priority -->
</div>
</div>
<!-- End Projects -->
<!-- Projects -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- List of Icons -->
<div class="row justify-content-between align-items-center mb-4">
<div class="col-6">
<a class="small text-secondary" href="#">
<span class="fa fa-bookmark text-primary mr-1"></span>
FR-13
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdown2Invoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdown2"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdown2"
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="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="settingsDropdown2" class="u-unfold right-0 text-left pl-2 mt-2" aria-labelledby="settingsDropdown2Invoker" style="min-width: 160px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-6 text-center font-size-13"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-code-branch min-width-6 text-center font-size-13"></span>
Repository
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-6 text-center font-size-13"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-6 text-center font-size-13"></span>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<div class="text-center">
<img class="u-lg-avatar rounded-circle mx-auto mb-3" src="../assets/img/160x160/img3.jpg" alt="Image Description">
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">Slack</h3>
<p class="font-size-14">Using our creative gifts drives this foundation.</p>
</div>
<!-- End Title -->
<h4 class="h6 font-weight-normal mb-1">Members</h4>
<!-- Members List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0">
<a class="u-icon u-icon-light u-icon--sm rounded-circle" href="#">
<span class="u-icon__inner">+1</span>
</a>
</li>
</ul>
<!-- End Members List -->
</div>
</div>
<div class="card-footer text-center">
<!-- Budget & Priority -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
<span class="text-dark">$3,120</span>
</div>
<div class="col-6">
<h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
<span class="fa fa-arrow-down text-success font-size-13"></span>
<span class="text-dark">Low</span>
</div>
</div>
<!-- End Budget & Priority -->
</div>
</div>
<!-- End Projects -->
<!-- Projects -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- List of Icons -->
<div class="row justify-content-between align-items-center mb-4">
<div class="col-6">
<a class="small text-secondary" href="#">
<span class="fa fa-bookmark text-primary mr-1"></span>
FR-36
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdown3Invoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdown3"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdown3"
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="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="settingsDropdown3" class="u-unfold right-0 text-left pl-2 mt-2" aria-labelledby="settingsDropdown3Invoker" style="min-width: 160px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-6 text-center font-size-13"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-code-branch min-width-6 text-center font-size-13"></span>
Repository
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-6 text-center font-size-13"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-6 text-center font-size-13"></span>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<div class="text-center">
<img class="u-lg-avatar rounded-circle mx-auto mb-3" src="../assets/img/160x160/img6.jpg" alt="Image Description">
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">DropBox</h3>
<p class="font-size-14">It's important to stay detail oriented with every project we tackle.</p>
</div>
<!-- End Title -->
<h4 class="h6 font-weight-normal mb-1">Members</h4>
<!-- Members List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-offset-3 mr-0">
<a class="u-icon u-icon-light u-icon--sm rounded-circle" href="#">
<span class="u-icon__inner">+9</span>
</a>
</li>
</ul>
<!-- End Members List -->
</div>
</div>
<div class="card-footer text-center">
<!-- Budget & Priority -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
<span class="text-dark">$15,000</span>
</div>
<div class="col-6">
<h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
<span class="fa fa-arrow-up text-danger font-size-13"></span>
<span class="text-dark">Highest</span>
</div>
</div>
<!-- End Budget & Priority -->
</div>
</div>
<!-- End Projects -->
</div>
JS library and initialization:
<!-- 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>