Informative Blocks - List
List style of informative blocks/components.
Info #1
Business Strategy Manager
Chicago, US
Business Strategy Senior Associate
New York, US
Senior Analyst, Data Analytics
Sydney, Australia
<!-- 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 -->
Info #2
<!-- 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>
Info #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 -->
Info #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 -->
Info #5
Senior Java Developer
- Slack LLC
- •
- Office
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, UKPosted
1 day agoSalary
35k - 45k
Fulltime
Channel Sales Director
- Dropbox
- •
- Remote
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, UKPosted
2 days agoSalary
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 -->
Info #6
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 -->