Icon boxes Pro component

Use icon boxes to indicate multiple features

Icon boxes

Normal Shadow

Inset Shadow

Combo Shadow

 <div class="row">
    <div class="col-12 col-sm-6 col-lg-4 mb-5 mb-lg-0">
        <!-- Icon box -->
        <div class="text-center">
            <div class="icon icon-shape shadow-soft border border-light rounded-circle">
                <span class="far fa-smile"></span>
            </div>
            <h3 class="h5 my-3">Normal Shadow</h3>
        </div>
        <!-- End of Icon box -->
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-5 mb-lg-0">
        <!-- Icon box -->
        <div class="text-center">
            <div class="icon icon-shape shadow-inset border border-light rounded-circle">
                <span class="far fa-smile"></span>
            </div>
            <h3 class="h5 my-3">Inset Shadow</h3>
        </div>
        <!-- End of Icon box -->
    </div>
    <div class="col-12 col-sm-6 col-lg-4">
        <!-- Icon box -->
        <div class="text-center">
            <div class="icon icon-shape-lg shadow-inset border border-light rounded-circle">
                <span class="icon icon-md icon-shape-sm shadow-soft border border-light rounded-circle"><span class="far fa-smile"></span></span>
            </div>
            <h3 class="h5 my-3">Combo Shadow</h3>
        </div>
        <!-- End of Icon box -->
    </div>
</div>

Icon boxes sizing

Use icon-shape-lg or icon-shape-sm to make the size larger or smaller:

Large Shape

Normal Shape

Small Shape

<div class="row">
    <div class="col-12 col-sm-6 col-lg-4 mb-5 mb-lg-0">
        <!-- Icon box -->
        <div class="text-center">
            <div class="icon icon-shape-lg shadow-soft border border-light rounded-circle">
                <span class="fas fa-user-astronaut"></span>
            </div>
            <h3 class="h5 my-3">Large Shape</h3>
        </div>
        <!-- End of Icon box -->
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-5 mb-lg-0">
        <!-- Icon box -->
        <div class="text-center">
            <div class="icon icon-shape shadow-soft border border-light rounded-circle">
                <span class="fas fa-user-astronaut"></span>
            </div>
            <h3 class="h5 my-3">Normal Shape</h3>
        </div>
        <!-- End of Icon box -->
    </div>
    <div class="col-12 col-sm-6 col-lg-4">
        <!-- Icon box -->
        <div class="text-center">
            <div class="icon icon-shape-sm shadow-soft border border-light rounded-circle">
                <span class="fas fa-user-astronaut"></span>
            </div>
            <h3 class="h5 my-3">Small Shape</h3>
        </div>
        <!-- End of Icon box -->
    </div>
</div>

Side icons

Left Icon

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Right Icon

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

<div class="row">
    <div class="col-md-12 mb-5">
        <!-- Icon box -->
        <div class="text-left">
            <div class="d-flex px-3">
                <div>
                    <div class="icon icon-shape-sm shadow-soft border-light rounded-circle">
                        <span class="fas fa-chess-rook"></span>
                    </div>
                </div>
                <div class="pl-4">
                    <h3 class="h5">Left Icon</h3>
                    <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                </div>
            </div>
        </div>
        <!-- End of Icon box -->
    </div>
    <div class="col-12">
        <!-- Icon box -->
        <div class="text-right">
            <div class="d-flex px-3">
                <div class="pr-4">
                    <h3 class="h5">Right Icon</h3>
                    <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                </div>
                <div>
                    <div class="icon icon-shape-sm shadow-soft border-light rounded-circle">
                        <span class="fas fa-user-astronaut"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Icon box -->
    </div>
</div>

Card icons

Ideas and Concepts

Designed with the latest design trends in mind. Our product feels modern.

Learn more

Ideas and Concepts

Designed with the latest design trends in mind. Our product feels modern.

Learn more 
<div class="row mb-lg-5">
    <div class="col-6 mb-5">
        <!-- Icon box -->
        <div class="card bg-primary shadow-soft border-light mb-4 mb-lg-0">
            <div class="card-body p-4 p-xl-5">
                <div class="icon icon-shape shadow-inset rounded-circle">
                    <span class="fas fa-basketball-ball"></span>
                </div>
                <h3 class="h5 my-3">Ideas and Concepts</h3>
                <p class="mb-4">Designed with the latest design trends in mind. Our product feels modern.</p>
                <a href="#" class="btn btn-primary">Learn more</a>
            </div>
        </div>
        <!-- End of Icon box -->
    </div>
    <div class="col-6 mb-5">
        <!-- Icon box -->
        <div class="card bg-primary shadow-soft border-light mb-4 mb-lg-0">
            <div class="card-body p-4 p-xl-5">
                <div class="icon icon-shape shadow-soft rounded-circle">
                    <span class="fas fa-baseball-ball"></span>
                </div>
                <h3 class="h5 my-3">Ideas and Concepts</h3>
                <p class="mb-4">Designed with the latest design trends in mind. Our product feels modern.</p>
                <a href="#" class="btn btn-primary">Learn more</a>
            </div>
        </div>
        <!-- End of Icon box -->
    </div>
</div>

Card icons 2

100% Satisfaction

Designed with the latest design trends in mind. Our product feels modern.

Learn more

100% Satisfaction

Designed with the latest design trends in mind. Our product feels modern.

Learn more 
<div class="row">
    <div class="col-12 mb-5">
        <!-- Icon Box -->
        <div class="card bg-primary shadow-soft border-light text-left mb-4 mb-md-0">
            <div class="card-body p-4 p-sm-5">
                <div class="d-flex px-3">
                    <div>
                        <div class="icon icon-shape shadow-soft rounded-circle">
                            <span class="far fa-grin-stars"></span>
                        </div>
                    </div>
                    <div class="pl-3 pl-sm-4">
                        <h3 class="h5">100% Satisfaction</h3>
                        <p class="mb-4">Designed with the latest design trends in mind. Our product feels modern.</p>
                        <a href="#" class="btn btn-primary btn-icon">
                            <span class="mr-2"><span class="fas fa-link"></span></span>
                            Learn more
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Icon Box -->
    </div>
    <div class="col-12">
        <!-- Icon Box -->
        <div class="card bg-primary shadow-soft border-light text-right mb-4 mb-md-0">
            <div class="card-body p-4 p-sm-5">
                <div class="d-flex px-3">
                    <div class="pr-3 pr-sm-4">
                        <h3 class="h5">100% Satisfaction</h3>
                        <p class="mb-4">Designed with the latest design trends in mind. Our product feels modern.</p>
                        <a href="#" class="btn btn-primary btn-icon">
                            <span class="mr-2"><span class="fas fa-link"></span></span>
                            Learn more
                        </a>
                    </div>
                    <div>
                        <div class="icon icon-shape shadow-inset rounded-circle">
                            <span class="far fa-grimace"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Icon Box -->
    </div>
</div>

Steps

Use these components to indicate a numerotated feature list:

1

Goal identification

Where I work with the client to determine what goals the site needs.

2

Content creation

Now that we have a bigger picture of the site in mind, we can start.

3

Testing

We've got all your pages and defined how they display to the site visitor.

<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-soft rounded-circle mb-4">
                <span class="step-number bg-primary rounded-circle border-light shadow-inset">1</span>
                <span class="icon-secondary"><span class="fas fa-bullseye"></span></span>
            </div>
            <h3 class="h5 step-title">Goal identification</h3>
            <p>Where I work with the client to determine what goals the site needs.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-soft rounded-circle mb-4">
                <span class="step-number bg-primary rounded-circle border-light shadow-inset">2</span>
                <span class="icon-secondary"><span class="fas fa-code-branch"></span></span>
            </div>
            <h3 class="h5 step-title">Content creation</h3>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-soft rounded-circle mb-4">
                <span class="step-number bg-primary rounded-circle border-light shadow-inset">3</span>
                <span class="icon-secondary"><span class="fas fa-award"></span></span>
            </div>
            <h3 class="h5 step-title">Testing</h3>
            <p>We've got all your pages and defined how they display to the site visitor.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>

Organic shape

1

Goal identification

Where I work with the client to determine what goals the site needs.

2

Content creation

Now that we have a bigger picture of the site in mind, we can start.

3

Testing

We've got all your pages and defined how they display to the site visitor.

<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-soft organic-radius mb-4">
                <span class="step-number bg-primary border-light shadow-inset">1</span>
                <span class="icon-secondary"><span class="fas fa-bullseye"></span></span>
            </div>
            <h3 class="h5 step-title">Goal identification</h3>
            <p>Where I work with the client to determine what goals the site needs.</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-soft organic-radius mb-4">
                <span class="step-number bg-primary border-light shadow-inset">2</span>
                <span class="icon-secondary"><span class="fas fa-code-branch"></span></span>
            </div>
            <h3 class="h5 step-title">Content creation</h3>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-soft organic-radius mb-4">
                <span class="step-number bg-primary border-light shadow-inset">3</span>
                <span class="icon-secondary"><span class="fas fa-award"></span></span>
            </div>
            <h3 class="h5 step-title">Testing</h3>
            <p>We've got all your pages and defined how they display to the site visitor.</p>
        </div>
    </div>
</div>

Shadow inset

1

Goal identification

Where I work with the client to determine what goals the site needs.

2

Content creation

Now that we have a bigger picture of the site in mind, we can start.

3

Testing

We've got all your pages and defined how they display to the site visitor.

<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-inset rounded-circle mb-4">
                <span class="step-number bg-primary rounded-circle border-light shadow-inset">1</span>
                <span class="icon-secondary"><span class="fas fa-bullseye"></span></span>
            </div>
            <h3 class="h5 step-title">Goal identification</h3>
            <p>Where I work with the client to determine what goals the site needs.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-inset rounded-circle mb-4">
                <span class="step-number bg-primary rounded-circle border-light shadow-inset">2</span>
                <span class="icon-secondary"><span class="fas fa-code-branch"></span></span>
            </div>
            <h3 class="h5 step-title">Content creation</h3>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary shadow-inset rounded-circle mb-4">
                <span class="step-number bg-primary rounded-circle border-light shadow-inset">3</span>
                <span class="icon-secondary"><span class="fas fa-award"></span></span>
            </div>
            <h3 class="h5 step-title">Testing</h3>
            <p>We've got all your pages and defined how they display to the site visitor.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>