Team

Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Style 1

You can choose to add a shadow instead of the default borders. The same rules as for the cards apply here also. See the shadow modifier classes to get the style you want.

Graphic designer

Desiree Jinny

Example


<div class="block block--style-5">
    <div class="block-image">
        <img src="path_to_your_image">
    </div>
    <div class="block-mask-caption--over d-flex align-items-center">
        <div class="col text-center">
            <h4 class="heading heading-xs strong-500 text-uppercase c-gray-lighter">
                Graphic designer
            </h4>
            <h3 class="heading heading-5 strong-500 c-gray-lighter">
                Desiree Jinny
            </h3>
            <ul class="social-media social-media--style-1-v1 social-media-circle mt-4">
                <li>
                    <a href="#">
                        <i class="ion ion-social-facebook"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="ion ion-social-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="ion ion-social-instagram"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="ion ion-social-whatsapp"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Style 2

Graphic designer

David Wally

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

Example


<div class="block block--style-3">
    <div class="block block-image">
        <div class="view view-second">
            <img src="path_to_your_image">
            <div class="mask mask-base-1--style-2">
                <div class="view-buttons">
                    <div class="view-buttons-inner text-center">
                        <a href="#" class="c-white" data-toggle="tooltip" data-original-title="View profile" date-placement="top">
                            <i class="icon ion-ios-paper-outline"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="block-body">
        <h4 class="heading heading-xs strong-400 text-uppercase letter-spacing-2 c-gray-light">Graphic designer</h4>
        <h3 class="heading heading-5 strong-500">David Wally</h3>
        <p class="mt-1">
            Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.
        </p>
    </div>
    <div class="block-footer border-top">
        <ul class="social-media social-media--style-1-v4">
            <li>
                <a href="#" class="facebook" target="_blank" title="Facebook">
                    <i class="fa fa-facebook"></i>
                </a>
            </li>
            <li>
                <a href="#" class="instagram" target="_blank">
                    <i class="fa fa-instagram"></i>
                </a>
            </li>
            <li>
                <a href="#" class="dribbble" target="_blank">
                    <i class="fa fa-dribbble"></i>
                </a>
            </li>
            <li>
                <a href="#" class="dribbble" target="_blank">
                    <i class="fa fa-github"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

Style 3

Darby Jewell

Programmer

Quisque ut nulla at nunc vehicula lacinia proin adipiscing porta tellus feugiat.

Example


<div class="block block--style-3 block--style-3-v2">
    <div class="block-image">
        <img src="path_to_your_image">
    </div>
    <div class="block-body py-3">
        <h3 class="heading heading-6 strong-600 mb-0">Darby Jewell</h3>
        <h4 class="heading heading-sm strong-300 mb-0">Programmer</h4>
    </div>
    <div class="block-body border-top py-3">
        <p class="mb-0">
            Quisque ut nulla at nunc vehicula lacinia proin adipiscing porta tellus feugiat.
        </p>
    </div>
    <div class="block-footer border-top py-3">
        <ul class="social-media social-media--style-1-v4">
            <li>
                <a href="#" class="facebook" target="_blank" title="Facebook">
                    <i class="fa fa-facebook"></i>
                </a>
            </li>
            <li>
                <a href="#" class="instagram" target="_blank">
                    <i class="fa fa-instagram"></i>
                </a>
            </li>
            <li>
                <a href="#" class="dribbble" target="_blank">
                    <i class="fa fa-dribbble"></i>
                </a>
            </li>
            <li>
                <a href="#" class="dribbble" target="_blank">
                    <i class="fa fa-github"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

Style 4

Darby Jewell Co-Founder

Example


<div class="animate-hover-slide-2">
    <div class="row cols-md-space cols-sm-space cols-xs-space">
        <div class="col-lg-6">
            <div class="block">
                <div class="figure">
                    <img src="path_to_your_image">
                    <div class="figcaption">
                        <h2 class="heading heading-5">
                            Darby Jewell
                            <span class="clearfix"></span>
                            <small>Co-Founder</small>
                        </h2>

                        <ul class="social-icons text-center">
                            <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Style 5

Graphic designer

David Wally

Example


<div class="block block--style-5">
    <div class="block-image">
        <a href="#">
            <img src="path_to_your_image">
        </a>
    </div>
    <div class="block-caption--over text-center">
        <h4 class="block-title-upper text-uppercase">Graphic designer</h4>
        <h3 class="heading heading-6 strong-600">David Wally</h3>
        <ul class="social-media social-media--style-1 social-media-circle mt-1">
            <li>
                <a href="#">
                    <i class="ion ion-social-facebook"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="ion ion-social-twitter"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="ion ion-social-instagram"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="ion ion-social-whatsapp"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

Style 6

David Wally

Sales Manager

David Wally

Sales Manager

Example


<div class="animate-hover-slide-3">
    <div class="row cols-md-space cols-sm-space cols-xs-space">
        <div class="col-lg-6">
            <div class="block block--style-3 block--style-3-v2">
                <div class="figure block-image">
                    <div class="view view-first">
                        <a href="#">
                            <img src="path_to_your_image">
                        </a>
                    </div>

                    <div class="figcaption">
                        <ul class="social-icons text-right">
                            <li class="text pull-left">
                                <small>More on:</small>
                            </li>
                            <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="block-body text-center">
                    <h3 class="heading heading-4 strong-500 mb-0">David Wally</h3>
                    <h4 class="heading heading-sm strong-300">Sales Manager</h4>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="block block--style-3 block--style-3-v2">
                <div class="figure block-image">
                    <div class="view view-first">
                        <a href="#">
                            <img src="path_to_your_image">
                        </a>
                    </div>

                    <div class="figcaption">
                        <ul class="social-icons text-right">
                            <li class="text pull-left">
                                <small>More on:</small>
                            </li>
                            <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="block-body text-center">
                    <h3 class="heading heading-4 strong-500 mb-0">David Wally</h3>
                    <h4 class="heading heading-sm strong-300">Sales Manager</h4>
                </div>
            </div>
        </div>
    </div>
</div>

Style 7

Bettie Mavis

Graphic designer

Example


<div class="block block--style-5">
    <div class="block-image">
        <img src="path_to_your_image">
    </div>
    <div class="block-mask-caption--over in d-flex align-items-end">
        <div class="col">
            <div class="text-center">
                <h3 class="heading heading-3 strong-500 c-gray-lighter">
                    Bettie Mavis
                </h3>
                <h4 class="heading heading-xs strong-300 text-uppercase c-gray-lighter">
                    Graphic designer
                </h4>
            </div>
        </div>
    </div>
</div>