Icon Blocks

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

Style 1

Icon and text aligned to left

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

You can easily align to right the block's content by adding the .block-icon-right on the icon's container.

Icon and text aligned to right

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

Example


<!-- Left aligned -->
<div class="icon-block icon-block--style-1-v1">
    <div class="block-icon">
        <i class="ion-ios-lightbulb-outline"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Icon and text aligned to left</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod...
        </p>
    </div>
</div>

<!-- Right aligned -->
<div class="icon-block icon-block--style-1-v1">
    <div class="block-icon block-icon-right">
        <i class="ion-ios-lightbulb-outline"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Icon and text aligned to right</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod...
        </p>
    </div>
</div>

Style 2

Icon and text aligned to left

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

You can easily align to right the block's content by adding the .block-icon-right on the icon's container.

Icon and text aligned to right

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

Switch to a smaller icon adding the .block-icon-sm on the icon's container.

This has a smaller icon

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

Example


<!-- Left aligned -->
<div class="icon-block icon-block--style-1-v2">
    <div class="block-icon">
        <i class="ion-ios-cog-outline"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Icon and text aligned to left</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

<!-- Right aligned -->
<div class="icon-block icon-block--style-1-v2">
    <div class="block-icon block-icon-right">
        <i class="ion-ios-cog-outline"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Icon and text aligned to right</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

<!-- Smaller icon -->
<div class="icon-block icon-block--style-1-v2">
    <div class="block-icon block-icon-sm">
        <i class="ion-ios-cog-outline"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">This has a smaller icon</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

Style 3

Dallams creek lake ledger

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

Dallams creek lake ledger

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

Dallams creek lake ledger

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

Dallams creek lake ledger

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

Example


<!-- Variation 1 -->
<div class="icon-block icon-block--style-1-v3">
    <div class="block-icon">
        <i class="ion-ios-flask"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Dallams creek lake ledger</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

<!-- Variation 2 -->
<div class="icon-block icon-block--style-1-v3 icon-block--style-1-v3-dashed">
    <div class="block-icon">
        <i class="ion-ios-flask"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Dallams creek lake ledger</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

<!-- Variation 3 -->
<div class="icon-block icon-block--style-1-v4">
    <div class="block-icon">
        <i class="ion-ios-download-outline"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Dallams creek lake ledger</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

<!-- Variation 4 -->
<div class="icon-block icon-block--style-1-v4 icon-block--style-1-v4-dashed">
    <div class="block-icon">
        <i class="ion-ios-flask"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-5 strong-600">Dallams creek lake ledger</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

Style 4

Dallams creek lake ledger

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

Use text alignment modifier classes .text-center or .text-right in order to align the block's content as you want.

Dallams creek lake ledger

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

Dallams creek lake ledger

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

Example


<div class="icon-block icon-block--style-1-v5">
    <div class="block-icon">
        <i class="ion-ios-time"></i>
    </div>
    <div class="block-content">
        <h3 class="heading heading-6 strong-600">Dallams creek lake ledger</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</div>

Style 5

Beware the mountain

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

Beware the mountain

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

Add any background class .bg-* on the block's icon to make it shiny and colorful. Use text and background utilities to change the appearance of an icon.

Listen to the nature

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

Listen to the nature

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

Change the shape of the block icon by adding the class .circle or .rounded on the icon's wrapper.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Example


<div class="icon-block icon-block--style-2-v1 text-center">
    <div class="block-icon circle bg-blue">
        <i class="ion-beaker"></i>
    </div>
    <h2 class="heading heading-6 strong-600">Beware the mountain</h2>
    <p class="px-2">
        Lorem ipsum dolor sit amet consectetur adipiscing elit...
    </p>
</div>

Style 6

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Add the .active modifier class on the main block container to make it look and stay as if it was mouse hovered.

Beware the mountain

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Change the shape of the block icon by adding the class .circle or .rounded on the icon's wrapper.

Listen to the nature

Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.

Example


<div class="icon-block icon-block--style-2-v2 text-center">
    <div class="block-icon circle">
        <i class="ion-beaker"></i>
    </div>
    <h2 class="heading heading-6 strong-600">Beware the mountain</h2>
    <p class="px-2">
        Donec id elit non mi porta gravida at eget metus fusce dapibus tellus.
    </p>
</div>

Style 7

Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Add any background class .bg-* on the block's icon to make it shiny and colorful. Use text and background utilities to change the appearance of an icon.
Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Adaptive design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam.

Example


<div class="icon-block icon-block--style-3">
    <i class="icon ion-settings bg-base-1"></i>
    <span class="heading heading-6 strong-600">
        Adaptive design
    </span>
    <p class="mt-3">
        Lorem ipsum dolor sit amet consectetur adipiscing elit...
    </p>
</div>

Style 8

The code is nice and flexible

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur.

The code is nice and flexible

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur.

Add any background class .bg-* on the block's icon to make it shiny and colorful. Use text and background utilities to change the appearance of an icon.

The code is nice and flexible

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur.

The code is nice and flexible

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur.

The code is nice and flexible

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur.

The code is nice and flexible

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur.

Example


<div class="icon-block icon-block--style-3 icon-block--style-3-v2">
    <i class="icon ion-ios-telephone-outline bg-orange"></i>
    <div class="icon-block-content">
        <h3 class="heading heading-6 strong-600">
            The code is nice and flexible
        </h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur.
        </p>
    </div>
</div>

Style 9

15 Aug

Clamtown weekly news

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

20 Sep

Clamtown weekly news

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.

Example


<div class="icon-block icon-block--style-3 icon-block--style-3-v2">
    <span class="icon-number bg-base-1 strong-600">15</span>
    <span class="icon-label strong-600 text-caps">Aug</span>
    <div class="icon-block-content">
        <h3 class="heading heading-6 strong-600">
            Clamtown weekly news
        </h3>
        <ul class="inline-links inline-links--style-1">
            <li class="d-none d-lg-inline-block">
                <i class="ion ion-clock"></i>
                <a href="#">10:00 AM - 01:00 PM</a>
            </li>
            <li>
                <i class="ion ion-navigate"></i>
                <a href="#">Bucuresti, Romania</a>
            </li>
        </ul>
        <p class="mt-3">
            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum est usus legentis in iis qui facit eorum claritatem.
        </p>
    </div>
</div>