Jobs blocks
Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Style 1
<a href="#">
<div class="block block--style-2 grid">
<div class="block-image block-image-animate--style-1">
<img src="path_to_your_image">
<span class="mask mask-dark--style-2"></span>
</div>
<div class="block-body-over text-center">
<div class="flex-item">
<h4 class="heading heading-4 strong-400 c-gray-lighter text-capitalize">
Education
</h4>
</div>
</div>
</div>
</a>
Style 2
Fulltime
Development specialist
Lorem ipsum dolor sit amet consectetur adipiscing elit.
Apply with CV
<div class="feature feature--boxed-border bg-white">
<span class="block-ribbon block-ribbon-right badge badge-pill bg-blue text-uppercase">Fulltime</span>
<h3 class="heading heading-5 strong-500">Development specialist</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit.
</p>
<a href="#" class="link link-sm mt-3">Apply with CV</a>
</div>
Style 3
Picked
Part time
This is a job title
Wordpress U.K
Description:
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam.
Use
shadow utilities to change the depth of a card. You can use it by default or apply it only when the mouse hovers the card.
The modifier classes responsable for the card's depth styling are
.z-depth-* with values from 1 to 5.
Picked
Part time
This is a job title
Wordpress U.K
Description:
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam.
<!-- No shadow -->
<div class="block block--style-3 list">
<div class="block-image block-image-sm">
<a href="#">
<img src="path_to_your_image" alt="">
</a>
</div>
<div class="block-title-wrapper">
<span class="badge label-md bg-pink">Picked</span>
<span class="badge label-md bg-green">Part time</span>
<h3 class="heading heading-5 strong-500 mt-1">
This is a job title
</h3>
<h4 class="heading heading-xs c-gray-light text-uppercase strong-400">Wordpress U.K</h4>
</div>
<span class="clearfix"></span>
<div class="block-body bt">
<h4 class="heading heading-xs c-style-1 text-uppercase">Description:</h4>
<p class="c-light">
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam.
</p>
</div>
<div class="block-footer border-top">
<div class="row align-items-center">
<div class="col-sm-8 col-12">
<ul class="inline-links inline-links--style-3">
<li>
<a href="#">
<i class="fa fa-heart"></i> 50
</a>
</li>
<li>
<i class="fa fa-eye"></i> 750
</li>
</ul>
</div>
<div class="col-sm-4 col-6 text-right">
<div class="btn-container">
<a href="#" class="btn btn-styled btn-xs-block btn-sm btn-base-1">Apply now</a>
</div>
</div>
</div>
</div>
</div>
<!-- With shadow -->
<div class="block block--style-3 list z-depth-2-top">
<div class="block-image block-image-sm">
<a href="#">
<img src="path_to_your_image" alt="">
</a>
</div>
<div class="block-title-wrapper">
<span class="badge label-md bg-pink">Picked</span>
<span class="badge label-md bg-green">Part time</span>
<h3 class="heading heading-5 strong-500 mt-1">
This is a job title
</h3>
<h4 class="heading heading-xs c-gray-light text-uppercase strong-400">Wordpress U.K</h4>
</div>
<span class="clearfix"></span>
<div class="block-body bt">
<h4 class="heading heading-xs c-style-1 text-uppercase">Description:</h4>
<p class="c-light">
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam.
</p>
</div>
<div class="block-footer border-top">
<div class="row align-items-center">
<div class="col-sm-8 col-12">
<ul class="inline-links inline-links--style-3">
<li>
<a href="#">
<i class="fa fa-heart"></i> 50
</a>
</li>
<li>
<i class="fa fa-eye"></i> 750
</li>
</ul>
</div>
<div class="col-sm-4 col-6 text-right">
<div class="btn-container">
<a href="#" class="btn btn-styled btn-xs-block btn-sm btn-base-1">Apply now</a>
</div>
</div>
</div>
</div>
</div>
Style 4
Full time
Adidas
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.
Use
shadow utilities to change the depth of a card. You can use it by default or apply it only when the mouse hovers the card.
The modifier classes responsable for the card's depth styling are
.z-depth-* with values from 1 to 5.
Full time
Adidas
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.
<div class="card">
<div class="card-image">
<a href="#">
<img src="path_to_your_image">
</a>
</div>
<div class="card-body">
<span class="badge bg-blue">Full time</span>
<h3 class="heading heading-6 strong-500 text-normal mt-1">
<a href="#">Outbound sales specialist</a>
</h3>
<h4 class="heading heading-xs c-gray-light text-uppercase strong-600">
Adidas
</h4>
<p class="c-gray-light mb-0">
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.
</p>
</div>
<div class="card-footer py-2 border-top">
<div class="row align-items-center">
<div class="col-sm-8 col-12">
<span class="text-sm">2 hrs ago</span>
</div>
<div class="col-sm-4 col-6 text-right">
<a href="#" class="btn btn-styled btn-sm btn-sm btn-base-1 btn-icon-only">
<i class="ion-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
