Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Keen's Callout examples include icons, text and action buttons with a background color effect.
Get In Touch

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.


                <div class="card card-custom gutter-b">
                	<div class="card-body">
                		<div class="d-flex align-items-center p-5">
                			<div class="mr-6">
                				<span class="svg-icon svg-icon-2x">
                					<svg>
                						...
                					</svg>
                				</span>
                			</div>
                			<div class="d-flex flex-column">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				    Get Started
                				</a>
                				<p class="text-dark-50">
                					...
                				</p>
                			</div>
                		</div>
                	</div>
                </div>
				
Customer Support

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.


                <div class="card card-custom gutter-b">
                	<div class="card-body">
                        <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                            <div class="d-flex flex-column mr-5">
                                <a href="#" class="h4 text-dark text-hover-primary mb-5">
                                    Customer Support
                                </a>
                                <p class="text-dark-50">
                                    ...
                                </p>
                            </div>
                            <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                                <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-success py-4 px-6">
                                    Make A Call
                                </a>
                            </div>
                        </div>
                	</div>
                </div>
				
Get In Touch

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-light-primary">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                            <div class="d-flex flex-column mr-5">
                                <a href="#" class="h4 text-dark text-hover-primary mb-5">
                                    Get In Touch
                                </a>
                                <p class="text-dark-50">
                                    There are many variations of Lorem Ipsum available.
                                </p>
                            </div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6">
                				Contact Us
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Customer Support

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-light-success">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				    Customer Support
                				</a>
                				<p class="text-dark-50">
                					There are many variations of passages of Lorem Ipsum.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-success py-4 px-6">
                				Make A Call
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Online Chat

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-light-danger">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				    Online Chat
                				</a>
                				<p class="text-dark-50">
                					There are many variations of passages of Lorem Ipsum available.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-danger py-4 px-6">
                				    Start Chat
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Get In Touch

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-primary">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				Get In Touch
                				</a>
                				<p class="text-dark-50">
                					There are many variations of Lorem Ipsum available.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6">
                				Contact Us
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Customer Support

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-diagonal">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				Customer Support
                				</a>
                				<p class="text-dark-50">
                					There are many variations of passages of Lorem Ipsum.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-light-success py-4 px-6">
                				Make A Call
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Online Chat

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-diagonal">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				Online Chat
                				</a>
                				<p class="text-dark-50">
                					There are many variations of passages of Lorem Ipsum available.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-light-warning py-4 px-6">
                				Start Chat
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Get In Touch

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-primary">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				Get In Touch
                				</a>
                				<p class="text-dark-50">
                					There are many variations of Lorem Ipsum available.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6">
                				Contact Us
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Customer Support

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-success">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				Customer Support
                				</a>
                				<p class="text-dark-50">
                					There are many variations of passages of Lorem Ipsum.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-success py-4 px-6">
                				Make A Call
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				
Online Chat

There are many variations of Lorem Ipsum available.


                <div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-warning">
                	<div class="card-body">
                		<div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
                			<div class="d-flex flex-column mr-5">
                				<a href="#" class="h4 text-dark text-hover-primary mb-5">
                				Online Chat
                				</a>
                				<p class="text-dark-50">
                					There are many variations of passages of Lorem Ipsum available.
                				</p>
                			</div>
                			<div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
                				<a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-warning py-4 px-6">
                				Start Chat
                				</a>
                			</div>
                		</div>
                	</div>
                </div>
				

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