Utilize our box examples to effortlessly design your website, make sure that "null-components" CSS file is included in your project. This UI can be used for "why choose us."

Example 1:

Title

Content

<section class="null-boxes-section box-example-1 null-padding-top-50 null-padding-bottom-50">

    <div class="null-container null-display-grid null-container-grid-3 null-gap-20">

    <div class="null-box-container null-box-shadow null-padding-20 null-border-radius">

            <div class="null-box-image-container null-background-light-grey null-image-circle">
                    <img src="" />
            </div><!--End null-box-image-container-->


            <div class="null-box-title-container null-margin-top-10">
                    <h3 class="null-box-title">Title</h3>
            </div><!--End null-box-title-container-->

            <div class="null-box-content-container">
                <p>Content</p>
            </div><!--End null-box-content-container-->

    </div><!--End null-box-container-->

    </div><!--End null-display-grid-->

</section><!--End null-boxes-section-->

/* Start Box Example 1 */

.box-example-1 .null-box-image-container {
width: 60px;
height: 60px;
}

/* End Box Example 1 */

Example 2:

Lorem, ipsum dolor.

Read More

<section class="null-boxes-section box-example-2 null-padding-top-50 null-padding-bottom-50">

    <div class="null-container null-display-grid null-container-grid-4 null-gap-20">

    <div class="null-box-container null-box-shadow null-padding-20 null-border-radius null-text-align-center">

            <div class="null-box-image-container null-background-light-grey null-border-radius">
                    <img class="null-border-radius" src="" />
            </div><!--End null-box-image-container-->


            <div class="null-box-title-container null-margin-top-10">
                    <h3 class="null-box-title">Title</h3>
            </div><!--End null-box-title-container-->

            <div class="null-box-link-container null-margin-top-10">
                <a class="null-button-hover null-font-size-14" href="#">Read More</a>
            </div>

    </div><!--End null-box-container-->

    </div><!--End null-display-grid-->

</section><!--End null-boxes-section-->

/* Start Box Example 2 */

.box-example-2 .null-box-image-container {
width: 70px;
height: 70px;
margin:auto;
}

/* End Box Example 2 */

Example 3:

Title

Content

<section class="null-boxes-section box-example-3 null-padding-top-50 null-padding-bottom-50">

    <div class="null-container null-display-grid null-container-grid-4 null-gap-20">

    <div class="null-box-container null-box-shadow null-padding-20 null-border-radius null-position-relative">

            <div class="null-box-image-container null-background-light-grey null-image-circle">
                    <img src="" />
            </div><!--End null-box-image-container-->


            <div class="null-box-title-container null-margin-top-10">
                    <h3 class="null-box-title">Title</h3>
            </div><!--End null-box-title-container-->

            <div class="null-box-content-container">
                <p>Content</p>
            </div>

    </div><!--End null-box-container-->

    </div><!--End null-display-grid-->

</section><!--End null-boxes-section-->

/* Start Box Example 3 */

.box-example-3 .null-box-image-container {
width: 60px;
height: 60px;
position: absolute;
top: -35px;
}

/* End Box Example 3 */

Example 4:

Lorem.

Lorem, ipsum dolor.

Lorem Lorem Lorem Lorem Lorem

<section class="null-boxes-section box-example-4 null-padding-top-50 null-padding-bottom-50">

    <div class="null-container null-display-grid null-container-grid-4 null-gap-20">

    <div class="null-box-container null-box-shadow null-padding-20 null-border-radius null-text-align-center">


            <div class="null-box-title-container">

                <h5 class="null-box-sub-title null-margin-bottom-10 null-color-grey">Sub Title</h5>

                <h3 class="null-box-title">Title</h3>

            </div><!--End null-box-title-container-->

            <div class="null-box-image-container null-background-light-grey null-image-circle null-margin-bottom-10 null-margin-top-10">
                    <img src="" />
            </div><!--End null-box-image-container-->


            <div class="null-box-tags-container null-flex null-flex-wrap-wrap null-gap-10">

                <a class="null-background-light-grey null-padding-5 null-border-radius" href="#">Lorem</a>
                <a class="null-background-light-grey null-padding-5 null-border-radius" href="#">Lorem</a>
                <a class="null-background-light-grey null-padding-5 null-border-radius" href="#">Lorem</a>
                <a class="null-background-light-grey null-padding-5 null-border-radius" href="#">Lorem</a>
                <a class="null-background-light-grey null-padding-5 null-border-radius" href="#">Lorem</a>

            </div><!--End null-box-tags-container-->

    </div><!--End null-box-container-->

    </div><!--End null-display-grid-->

</section><!--End null-boxes-section-->

/* Start Box Example 4 */

.box-example-4 .null-box-image-container {
width: 60px;
height: 60px;
margin:auto;
}

/* End Box Example 4 */