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

Example


<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

Example


<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.

Example


<!-- 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

Outbound sales specialist

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

Outbound sales specialist

Adidas

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.

Example


<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>