Users

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.

Desiree Jinny

CEO of Webpixels

Follow
  • 10k Followers
  • 5k Following

Example


<div class="block block--style-3">
    <div class="profile-picture profile-picture--style-2">
        <img src="path_to_your_image">
    </div>

    <div class="block-body text-center">
        <h3 class="heading heading-6 strong-600 mb-0 mb-0">Desiree Jinny</h3>
        <h3 class="heading heading-light heading-sm strong-300">CEO of Webpixels</h3>

        <a href="#" class="btn btn-base-1 btn-shadow btn-circle px-4 mt-2">Follow</a>
    </div>
    <div class="aux-info-wrapper border-top">
        <ul class="aux-info">
            <li class="heading strong-400 text-center">
                <span class="d-block strong-600">10k</span>
                Followers
            </li>
            <li class="heading strong-400 text-center">
                <span class="d-block strong-600">5k</span>
                Following
            </li>
        </ul>
    </div>
</div>

Style 2

John Doe Microsoft Corporation Inc.

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

Message

Example


<div class="block-author">
    <div class="author-image">
        <img src="path_to_your_image" class="rounded-circle">
    </div>
    <div class="author-info">
        <span class="d-block heading heading-6 strong-600 mb-0">John Doe</span>
        <span class="d-block text-sm strong-500">Microsoft Corporation Inc.</span>
    </div>
</div>
<hr>
<p>
    Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.
</p>
<hr>
<div class="d-flex">
   <div class="pr-4">
       <i class="fa fa-envelope mr-1"></i>
       <a href="#" class="link link-sm link--style-3">Message</a>
   </div>
   <div class="">
       <i class="fa fa-user-plus mr-1"></i>
       <a href="#" class="link link-sm link--style-3">Connect</a>
   </div>
</ul>
</div>

Style 3

Desiree Jinny

Employee

Example


<div class="block block--style-3">
    <div class="profile-picture profile-picture--style-2">
        <img src="path_to_your_image">
    </div>
    <div class="block-body text-center">
        <h3 class="heading heading-6 strong-600">Desiree Jinny</h3>
        <span class="text-md"><i class="fa fa-user-o mr-2 c-pink"></i> Employee</span>
    </div>
    <div class="aux-info-wrapper border-top">
        <ul class="aux-info">
            <li class="text-center">
                <a href="#">
                    <i class="fa fa-envelope-o"></i>
                </a>
            </li>
            <li class="text-center">
                <a href="#">
                    <i class="fa fa-bookmark-o"></i>
                </a>
            </li>
            <li class="text-center">
                <a href="#">
                    <i class="fa fa-user-o"></i>
                </a>
            </li>
        </ul>
    </div>
</div>