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.
<!-- List of Job Positions -->
<ul class="list-unstyled mb-0">
<li class="my-3">
<!-- Job -->
<a class="d-block text-dark u-info-v1 rounded p-4" href="../html/pages/careers-single.html">
<span class="row justify-content-sm-between align-items-sm-center">
<span class="col-sm-6 mb-2 mb-sm-0">
Business Strategy Manager
<small class="d-block text-muted">Chicago, US</small>
</span>
<span class="col-sm-6 text-primary text-sm-right">Full time</span>
</span>
</a>
<!-- End Job -->
</li>
<li class="my-3">
<!-- Job -->
<a class="d-block text-dark u-info-v1 rounded p-4" href="../html/pages/careers-single.html">
<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
<small class="d-block text-muted">New York, US</small>
</span>
<span class="col-sm-6 text-primary text-sm-right">Full time</span>
</span>
</a>
<!-- End Job -->
</li>
<li class="my-3">
<!-- Job -->
<a class="d-block text-dark u-info-v1 rounded p-4" href="../html/pages/careers-single.html">
<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
<small class="d-block text-muted">Sydney, Australia</small>
</span>
<span class="col-sm-6 text-primary text-sm-right">Full time</span>
</span>
</a>
<!-- End Job -->
</li>
</ul>
<!-- End List of Job Positions -->
Info #2
.u-info-v1 class has a few CSS styles along with transition effect on hover.
-
How do I get a receipt for my purchase?
1 article in this collection Written by Luisa Woodfine and Neil Galavan -
-
What methods of payments are supported?
2 article in this collection Written by Fiona Burke, Luisa Woodfine and Neil Galavan -
-
How do I get access to a theme I purchased?
5 article in this collection Written by Fiona Burke, Luisa Woodfine, Neil Galavan and Monica Garcia -
-
Which license do I need?
5 article in this collection Written by Fiona Burke, Luisa Woodfine, Neil Galavan and Monica Garcia -
-
How can I get a refund?
3 article in this collection Written by Luisa Woodfine -
-
How do I get help with the theme I purchased?
2 article in this collection Written by Fiona Burke, Luisa Woodfine and Neil Galavan -
-
My account
1 article in this collection Written by Luisa Woodfine and Monica Garcia -
<!-- List of Topics -->
<ul class="list-unstyled">
<li class="mt-2 mb-4">
<!-- Topic -->
<a class="d-block u-info-v1 rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/receipt-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How do I get a receipt for my purchase?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">1 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block u-info-v1 rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/payment-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">What methods of payments are supported?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">2 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block u-info-v1 rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/unlocked-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How do I get access to a theme I purchased?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<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">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">5 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine, Neil Galavan
<span class="text-muted">and</span>
Monica Garcia
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block u-info-v1 rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/file-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">Which license do I need?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<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">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">5 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine, Neil Galavan
<span class="text-muted">and</span>
Monica Garcia
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block u-info-v1 rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/refund-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How can I get a refund?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">3 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Luisa Woodfine
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block u-info-v1 rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/comments-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How do I get help with the theme I purchased?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">2 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="mt-4 mb-0">
<!-- Topic -->
<a class="d-block u-info-v1 rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/user-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">My account</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">1 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Luisa Woodfine
<span class="text-muted">and</span>
Monica Garcia
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
</ul>
<!-- End List of Topics -->
Info #3
Slack
A cloud-based set of proprietary team collaboration tools and services.
Mapbox
A large provider of custom online maps for websites and applications.
Spotify
An entertainment service, specialized in music, podcast, and video streaming service.
Airbnb
An online marketplace and hospitality service for people to lease or rent short-term lodging.
DigitalOcean
Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers.
InVision
InVision is the digital product design platform used to make the world's best customer experiences.
<div class="container space-2 space-3--lg">
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card border-0 mb-3">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img3.jpg" alt="Image Description">
<h4 class="h5 mb-1">Slack</h4>
<p class="mb-0">A cloud-based set of proprietary team collaboration tools and services.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<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">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0 mb-3">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img4.jpg" alt="Image Description">
<h4 class="h5 mb-1">Mapbox</h4>
<p class="mb-0">A large provider of custom online maps for websites and applications.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0 mb-3">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img5.jpg" alt="Image Description">
<h4 class="h5 mb-1">Spotify</h4>
<p class="mb-0">An entertainment service, specialized in music, podcast, and video streaming service.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
</div>
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card border-0 mb-3 mb-lg-0">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<h4 class="h5 mb-1">Airbnb</h4>
<p class="mb-0">An online marketplace and hospitality service for people to lease or rent short-term lodging.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<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">
<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">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0 mb-3 mb-lg-0">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img6.jpg" alt="Image Description">
<h4 class="h5 mb-1">DigitalOcean</h4>
<p class="mb-0">Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<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">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img1.jpg" alt="Image Description">
<h4 class="h5 mb-1">InVision</h4>
<p class="mb-0">InVision is the digital product design platform used to make the world's best customer experiences.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<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">
<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">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
</div>
</div>
Info #4
Maria Muszynska
I am an ambitious workaholic, but apart from that, pretty simple person. Whether it's branding, print, UI + UX I've got you covered. I strive to figure out the right solutions for your look to stand out amongst the rest.
All Author Posts
<!-- Author -->
<div class="media">
<img class="u-lg-avatar rounded-circle mr-4" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h5">Maria Muszynska</h4>
<p>I am an ambitious workaholic, but apart from that, pretty simple person. Whether it's branding, print, UI + UX I've got you covered. I strive to figure out the right solutions for your look to stand out amongst the rest.</p>
<a class="btn btn-sm btn-secondary" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">All Author Posts</a>
</div>
</div>
<!-- End Author -->