Iconbox

<div class="list-inline flex-wrap my-n2">
    <div class="list-inline-item py-2">
        <a href="../explore-sidebar-grid.html"
           class="card border-0 icon-box-style-01 link-hover-dark-white">
            <div class="card-body p-0">
                <svg class="icon icon-pizza">
                    <use xlink:href="#icon-pizza"></use>
                </svg>
                <span class="card-text font-size-md font-weight-semibold mt-2 d-block">
                    Foods
                </span>
            </div>
        </a>
    </div>
    <div class="list-inline-item py-2">
        <a href="../explore-sidebar-grid.html"
           class="card border-0 icon-box-style-01 link-hover-dark-white">
            <div class="card-body p-0">
                <svg class="icon icon-bed">
                    <use xlink:href="#icon-bed"></use>
                </svg>
                <span class="card-text font-size-md font-weight-semibold mt-2 d-block">
                    Hotels
                </span>
            </div>

        </a>
    </div>
    <div class="list-inline-item py-2">
        <a href="../explore-sidebar-grid.html"
           class="card border-0 icon-box-style-01 link-hover-dark-white">
            <div class="card-body p-0">
                <svg class="icon icon-brush2">
                    <use xlink:href="#icon-brush2"></use>
                </svg>
                <span class="card-text font-size-md font-weight-semibold mt-2 d-block">
                    Jobs
                </span>
            </div>
        </a>
    </div>
    <div class="list-inline-item py-2">
        <a href="../explore-sidebar-grid.html"
           class="card border-0 link-hover-dark-white icon-box-style-01">
            <div class="card-body p-0">
                <svg class="icon icon-pharmaceutical">
                    <use xlink:href="#icon-pharmaceutical"></use>
                </svg>
                <span class="card-text font-size-md font-weight-semibold mt-2 d-block">
                    Medicals
                </span>
            </div>
        </a>
    </div>
    <div class="list-inline-item py-2">
        <a href="../explore-sidebar-grid.html"
           class="card border-0 link-hover-dark-white icon-box-style-01">
            <div class="card-body p-0">
                <svg class="icon icon-cog">
                    <use xlink:href="#icon-cog"></use>
                </svg>
                <span class="card-text font-size-md font-weight-semibold mt-2 d-block">
                    Services
                </span>
            </div>

        </a>
    </div>
    <div class="list-inline-item py-2">
        <a href="../explore-sidebar-grid.html"
           class="card border-0 link-hover-dark-white icon-box-style-01">
            <div class="card-body p-0">
                <svg class="icon icon-bag">
                    <use xlink:href="#icon-bag"></use>
                </svg>
                <span class="card-text font-size-md font-weight-semibold mt-2 d-block">
                    Shopping
                </span>
            </div>

        </a>
    </div>
    <div class="list-inline-item py-2">
        <a href="../explore-sidebar-grid.html" class="card border-0 link-hover-dark-white icon-box-style-01">
            <div class="card-body p-0">
                <svg class="icon icon-car">
                    <use xlink:href="#icon-car"></use>
                </svg>
                <span class="card-text font-size-md font-weight-semibold mt-2 d-block">
                    Automotive
                </span>
            </div>
        </a>
    </div>
</div>

<div class="home-main-how-it-work bg-white pt-11 pb-11">
    <div class="container">
        <h2 class="mb-12">
            <span>See</span>
            <span class="font-weight-light">How It Works</span>
        </h2>
        <div class="row no-gutters">
            <div class="col-lg-4 mb-4 mb-lg-0 px-0 px-lg-4">
                <div class="media icon-box-style-02">
                    <div class="d-flex flex-column align-items-center mr-6">
                        <svg class="icon icon-checkmark-circle">
                            <use xlink:href="#icon-checkmark-circle"></use>
                        </svg>
                        <span class="number h1 font-weight-bold">1</span>
                    </div>
                    <div class="media-body lh-14">
                        <h5 class="mb-3 lh-1">
                            Choose What To Do
                        </h5>
                        <p class="font-size-md text-gray mb-0 text-muted">
                            Looking for a cozy hotel to stay, a restaurant to eat, a museum to visit
                            or a mall to do some shopping?
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4 mb-lg-0 px-0 px-lg-4">
                <div class="media icon-box-style-02">
                    <div class="d-flex flex-column align-items-center mr-6">
                        <svg class="icon icon-checkmark-circle">
                            <use xlink:href="#icon-checkmark-circle"></use>
                        </svg>
                        <span class="number h1 font-weight-bold">2</span>
                    </div>
                    <div class="media-body lh-14">
                        <h5 class="mb-3 lh-1">
                            Find What You Want
                        </h5>
                        <p class="font-size-md text-gray mb-0 text-muted">
                            Search and filter hundreds of listings, read reviews, explore photos and
                            find the perfect spot.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4 mb-lg-0 px-0 px-lg-4">
                <div class="media icon-box-style-02">
                    <div class="d-flex flex-column align-items-center mr-6">
                        <svg class="icon icon-checkmark-circle">
                            <use xlink:href="#icon-checkmark-circle"></use>
                        </svg>
                        <span class="number h1 font-weight-bold">3</span>
                    </div>
                    <div class="media-body lh-14">
                        <h5 class="mb-3 lh-1">
                            Explore Amazing Places
                        </h5>
                        <p class="font-size-md text-gray mb-0 text-muted">
                            Go and have a good time or even make a booking directly from the listing
                            page. All of those, thanks to TheDir!
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section id="section-02" class="py-12 border-top">
    <div class="container">
        <div class="row no-gutters">
            <div class="col-lg-4 mb-4 mb-lg-0 px-0 px-lg-4">
                <div class="media icon-box-style-02">
                    <div class="d-flex flex-column align-items-center mr-6 color-primary">
                        <svg class="icon icon-checkmark-circle">
                            <use xlink:href="#icon-checkmark-circle"></use>
                        </svg>
                        <span class="number h1 font-weight-bold">1</span>
                    </div>
                    <div class="media-body lh-14">
                        <h4 class="mb-3 font-weight-bold lh-1">
                            Find nearby providers in your location
                        </h4>
                        <p class="font-size-md text-gray mb-0 text-muted">
                            Find the right doctor within the closest hospital
                            across a wide range of medical fields including neurosurgery
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4 mb-lg-0 px-0 px-lg-4">
                <div class="media icon-box-style-02">
                    <div class="d-flex flex-column align-items-center mr-6 color-primary">
                        <svg class="icon icon-checkmark-circle">
                            <use xlink:href="#icon-checkmark-circle"></use>
                        </svg>
                        <span class="number h1 font-weight-bold">2</span>
                    </div>
                    <div class="media-body lh-14">
                        <h4 class="mb-3 font-weight-bold lh-1">
                            Browse real customer reviews
                        </h4>
                        <p class="font-size-md text-gray mb-0 text-muted">
                            Browse real patient reviews or write a
                            doctor review to let others know about your experience.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4 mb-lg-0 px-0 px-lg-4">
                <div class="media icon-box-style-02">
                    <div class="d-flex flex-column align-items-center mr-6 color-primary">
                        <svg class="icon icon-checkmark-circle">
                            <use xlink:href="#icon-checkmark-circle"></use>
                        </svg>
                        <span class="number h1 font-weight-bold">3</span>
                    </div>
                    <div class="media-body lh-14 lh-1">
                        <h4 class="mb-3 font-weight-bold">
                            Book appointments with a tap
                        </h4>
                        <p class="font-size-md text-gray mb-0 text-muted">
                            Easy to search Doctors and book appointments online,
                            instantly just with a tap.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="py-6 px-4">
    <div class="icon-list-items">
        <div class="row">
            <div class="col-md-6">
                <ul class="icon-list list-group list-group-flush list-group-borderless">
                    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03">
                        <span class="icon-box-icon d-inline-block mr-3">
                            <svg class="icon icon-ionicons_svg_md-help-buoy"><use
                                                            xlink:href="#icon-ionicons_svg_md-help-buoy"></use></svg>
                        </span>
                        <span>Consectetur adipisicing elit crasturi ebemd</span>
                    </li>
                    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03 ">
                        <span class="icon-box-icon d-inline-block mr-3">
                            <svg class="icon icon-ionicons_svg_md-stats"><use
                                                            xlink:href="#icon-ionicons_svg_md-stats"></use></svg>
                        </span>
                        <span>Aenean commodo ligula eget preate shp mage</span>
                    </li>
                    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03 ">
                        <span class="icon-box-icon d-inline-block mr-3"><i
                                class="fas fa-location"></i></span>
                        <span>Lorem ipsum dolor sit amet seta praonu tusi</span>
                    </li>
                    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03 ">
                        <span class="icon-box-icon d-inline-block mr-3">
                            <svg class="icon icon-ionicons_svg_md-wifi"><use
                                    xlink:href="#icon-ionicons_svg_md-wifi"></use></svg></span>
                        <span>Montes, nascetur ridiculus musoroom tanon</span>
                    </li>
                    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03">
                        <span class="icon-box-icon d-inline-block mr-3"><i
                                                        class="fal fa-arrows"></i></span>
                        <span>Is qui facit eorum claritatem sepmra based </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<ul class="icon-list list-group list-group-flush list-group-borderless">
    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03">
        <span class="icon-box-icon d-inline-block mr-3 text-primary">
            <svg class="icon icon-ionicons_svg_md-help-buoy"><use
                    xlink:href="#icon-ionicons_svg_md-help-buoy"></use></svg>
        </span>
        <span>Consectetur adipisicing elit crasturi ebemd</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3 text-primary">
            <svg class="icon icon-ionicons_svg_md-stats"><use
                    xlink:href="#icon-ionicons_svg_md-stats"></use></svg>
        </span>
        <span>Aenean commodo ligula eget preate shp mage</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3 text-primary"><i
                class="fas fa-location"></i></span>
        <span>Lorem ipsum dolor sit amet seta praonu tusi</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3 text-primary"><svg
                class="icon icon-ionicons_svg_md-wifi"><use
                xlink:href="#icon-ionicons_svg_md-wifi"></use></svg></span>
        <span>Montes, nascetur ridiculus musoroom tanon</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box no-shape icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3 text-primary"><i
                class="fal fa-arrows"></i></span>
        <span>Is qui facit eorum claritatem sepmra based </span>
    </li>
</ul>

<ul class="icon-list list-group list-group-flush list-group-borderless">
    <li class="list-group-item p-0 mb-3 icon-box shape-icon shape-circle color-gray icon-outline icon-box-style-03">
        <span class="icon-box-icon d-inline-block mr-3">
            <svg class="icon icon-ionicons_svg_md-help-buoy"><use
                    xlink:href="#icon-ionicons_svg_md-help-buoy"></use></svg>
        </span>
        <span>Consectetur adipisicing elit crasturi ebemd</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon shape-circle color-gray icon-outline icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3">
            <svg class="icon icon-ionicons_svg_md-stats"><use
                    xlink:href="#icon-ionicons_svg_md-stats"></use></svg>
        </span>
        <span>Aenean commodo ligula eget preate shp mage</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon shape-circle color-gray icon-outline icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3"><i
                class="fas fa-location"></i></span>
        <span>Lorem ipsum dolor sit amet seta praonu tusi</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon shape-circle color-gray icon-outline icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3"><svg
                class="icon icon-ionicons_svg_md-wifi"><use
                xlink:href="#icon-ionicons_svg_md-wifi"></use></svg></span>
        <span>Montes, nascetur ridiculus musoroom tanon</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon shape-circle color-gray icon-outline icon-box-style-03">
        <span class="icon-box-icon d-inline-block mr-3"><i
                class="fal fa-arrows"></i></span>
        <span>Is qui facit eorum claritatem sepmra based </span>
    </li>
</ul>

<ul class="icon-list list-group list-group-flush list-group-borderless">
    <li class="list-group-item p-0 mb-3 icon-box shape-icon background-icon shape-circle color-primary icon-box-style-03">
        <span class="icon-box-icon d-inline-block mr-3">
            <svg class="icon icon-ionicons_svg_md-help-buoy"><use
                    xlink:href="#icon-ionicons_svg_md-help-buoy"></use></svg>
        </span>
        <span>Consectetur adipisicing elit crasturi ebemd</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon background-icon shape-circle color-primary icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3">
            <svg class="icon icon-ionicons_svg_md-stats"><use
                    xlink:href="#icon-ionicons_svg_md-stats"></use></svg>
        </span>
        <span>Aenean commodo ligula eget preate shp mage</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon background-icon shape-circle color-primary icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3"><i
                class="fas fa-location"></i></span>
        <span>Lorem ipsum dolor sit amet seta praonu tusi</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon background-icon shape-circle color-primary icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3"><svg
                class="icon icon-ionicons_svg_md-wifi"><use
                xlink:href="#icon-ionicons_svg_md-wifi"></use></svg></span>
        <span>Montes, nascetur ridiculus musoroom tanon</span>
    </li>
    <li class="list-group-item p-0 mb-3 icon-box shape-icon background-icon shape-circle color-primary icon-box-style-03 ">
        <span class="icon-box-icon d-inline-block mr-3"><i
                class="fal fa-arrows"></i></span>
        <span>Is qui facit eorum claritatem sepmra based </span>
    </li>
</ul>