Logo
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Media / Equalizer Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Use .overlay component to have multi-purpose overlay components.

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                          <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-1.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer">
                            <a href="#" class="btn font-weight-bold btn-primary btn-shadow" >Explore</a>
                            <a href="#" class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Purchase</a>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-2.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer align-items-end justify-content-center">
                            <div class="d-flex flex-grow-1 flex-center bg-white-o-5 py-5">
                                <a href="#" class="btn font-weight-bold btn-primary btn-shadow">Explore</a>
                                <a href="#" class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Purchase</a>
                            </div>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-3.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer align-items-start justify-content-center">
                            <div class="d-flex flex-grow-1 flex-center bg-white-o-5 py-5">
                                <a href="#" class="btn font-weight-bold btn-primary btn-shadow">Explore</a>
                                <a href="#" class="btn font-weight-bold btn-light-primary btn-shadow ml-2">Purchase</a>
                            </div>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-4.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer align-items-end justify-content-end pb-5 pr-5">
                            <a href="#" class="btn btn-clean btn-icon mr-2"><i class="flaticon2-notification icon-lg text-primary"></i></a>
                            <a href="#" class="btn btn-clean btn-icon"><i class="flaticon2-plus icon-lg text-primary"></i></a>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-5.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer align-items-start justify-content-end pt-5 pr-5">
                            <a href="#" class="btn btn-clean btn-icon mr-2"><i class="flaticon2-notification icon-lg text-primary"></i></a>
                            <a href="#" class="btn btn-clean btn-icon"><i class="flaticon2-plus icon-lg text-primary"></i></a>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-6.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer align-items-start justify-content-start pt-5 pl-5">
                            <a href="#" class="btn btn-clean btn-icon mr-2"><i class="flaticon2-notification icon-lg text-primary"></i></a>
                            <a href="#" class="btn btn-clean btn-icon"><i class="flaticon2-plus icon-lg text-primary"></i></a>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-7.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer m-5 rounded align-items-end justify-content-start">
                            <div class="d-flex flex-column align-items-start mb-5 ml-5">
                                <span class="label label-success label-xl label-inline mb-1">Shop</span>
                                <a href="#" class="font-size-h4 font-weight-bolder text-white text-hover-primary">Deal of the Day</a>
                            </div>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-8.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer m-5 rounded flex-center">
                            <div class="d-flex flex-column flex-center">
                                <span class="label label-danger label-xl label-inline mb-1">Shop</span>
                                <a href="#" class="font-size-h4 font-weight-bolder text-white text-hover-primary">Deal of the Day</a>
                            </div>
                        </div>
                    </div>
                </div>
                

                <div class="card card-custom overlay">
                    <div class="card-body p-0">
                        <div class="overlay-wrapper">
                            <img src="<?php echo Page::getMediaPath();?>stock-600x400/img-9.jpg" alt="" class="w-100 rounded"/>
                        </div>
                        <div class="overlay-layer m-5 rounded align-items-start justify-content-end">
                            <div class="d-flex flex-column mt-5 mr-5 align-items-end">
                                <span class="label label-warning label-xl label-inline mb-1">Shop</span>
                                <a href="#" class="font-size-h4 font-weight-bolder text-white text-hover-primary">Deal of the Day</a>
                            </div>
                        </div>
                    </div>
                </div>
                

Card Blocking

Please enter your Address.
Please enter your Address 2.

                <div class="card card-custom overlay overlay-block">
                    <div class="card-header">
                        <div class="card-title">
                            <h3 class="card-label">Card Blocking</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="overlay-wrapper">
                            <div class="form-group">
        						<label>Address Line 1</label>
        						<input type="text" class="form-control form-control-solid form-control-lg" name="address1" placeholder="Address Line 1"/>
        					    <span class="form-text text-muted">Please enter your Address.</span>
                            </div>
                            <div class="form-group">
        						<label>Address Line 2</label>
        						<input type="text" class="form-control form-control-solid form-control-lg" name="address1" placeholder="Address Line 1"/>
        					    <span class="form-text text-muted">Please enter your Address 2.</span>
                            </div>
            			</div>
            			<div class="overlay-layer bg-dark-o-10">
                            <div class="spinner spinner-primary"></div>
            			</div>
                    </div>
                </div>
                

Content Blocking

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.

                <div class="overlay overlay-block rounded">
                    <div class="overlay-wrapper p-5">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to.
                    </div>
                    <div class="overlay-layer rounded bg-primary-o-20">
                        <div class="spinner spinner-primary"></div>
                    </div>
                </div>
                

Modal Blocking

Toggle a working modal demo by clicking the button below.


                <!--begin::Modal Body Overlay-->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <i aria-hidden="true" class="ki ki-close"></i>
                                </button>
                            </div>

                            <!--begin::Overlay-->
                            <div class="modal-body overlay overlay-block">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                                remaining essentially unchanged.

                                <!--begin::Overlay Layer-->
                                <div class="overlay-layer bg-transparent">
                                    <div class="spinner spinner-lg spinner-warning"></div>
                    			</div>
                                <!--end::Overlay Layer-->
                            </div>
                            <!--end::Overlay-->

                            <div class="modal-footer">
                                <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Modal Body Overlay-->

                <!--begin::Entire Modal Overlay-->
                <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <!--begin::Overlay-->
                            <div class="overlay overlay-block">
                                <!--begin::Modal Content-->
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <i aria-hidden="true" class="ki ki-close"></i>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                    when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining essentially unchanged.
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
                                </div>
                                <!--end::Modal Content-->

                                <!--begin::Overlay Layer-->
                                <div class="overlay-layer bg-success-o-20">
                                    <div class="spinner spinner-lg spinner-danger"></div>
                                </div>
                                <!--end::Overlay Layer-->
                            </div>
                            <!--end::Overlay-->
                        </div>
                    </div>
                </div>
                <!--end::Entire Modal Overlay-->
                

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9