Notification UI Design Free Download

Notification UI Design

Table of Contents

Notification UI Design is very useful for any website or mobile app. Notification UI is an act of bringing something to the notice of the user. Notification UI is a way for an app or website to notify users or send a message that users can read without having to open the app. Most of the companies are using the Notification UI for Business promotion or New Product or new service launch.

Demo

How to create a Notification UI Design?

In this tutorial, we will learn how to create a Notification UI Design using Bootstrap library, Javascript, HTML, and CSS.

So, let’s start, First we need the add the below Bootstrap library and Javascript library in the Header section of the web page.

CSS Library

<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</a>" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<a href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" target="_blank" rel="noreferrer noopener">https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</a>">
<link rel="stylesheet" type="text/css" href="css/style.css">

Javascript Library

<script src="<a href="https://code.jquery.com/jquery-3.2.1.slim.min.js" target="_blank" rel="noreferrer noopener">https://code.jquery.com/jquery-3.2.1.slim.min.js</a>"></script> 
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" target="_blank" rel="noreferrer noopener">https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js</a>"></script> 
<script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" target="_blank" rel="noreferrer noopener">https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js</a>"></script>

HTML Code

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container"> <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown notification-ui"> <a class="nav-link dropdown-toggle notification-ui_icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i> <span class="unread-notification"></span> </a>
            <div class="dropdown-menu notification-ui_dd" aria-labelledby="navbarDropdown">
              <div class="notification-ui_dd-header">
                <h3 class="text-center">Notification</h3>
              </div>
              <div class="notification-ui_dd-content">
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user1.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Rahul Singh</b> reacted to your post</p>
                    <p><small>10 mins ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random1.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user2.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Karan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random2.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user3.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Aryan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random3.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user4.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Neha</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random4.jpg" alt="Feature image"> </div>
                </div>
              </div>
              <div class="notification-ui_dd-footer text-center py-3"> <a href="#!" class="btn btn-success btn-block">View All</a> </div>
            </div>
          </li>
          <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Signup</a> </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<div class="container"> <a class="navbar-brand" href="#">Navbar</a>

<h3 class="text-center">Notification</h3>

</div>

<p><b>Rahul Singh</b> reacted to your post</p>

</div>

</div>

<p><b>Karan</b> reacted to your post</p>

</div>

</div>

<p><b>Aryan</b> reacted to your post</p>

</div>

</div>

<p><b>Neha</b> reacted to your post</p>

</div>

</div>

</div>

</li>

<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Login</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Signup</a> </li>

</ul>

</div>

</nav>

</header>

CSS Code

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap);body {
  font-family: "Roboto", sans-serif;
  background: #E6E9ED;
  min-height: 100vh;
  position: relative;
}

.notification-ui a:after {
  display: none;
}

.notification-ui_icon {
  position: relative;
}
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: unset !important;
    align-items: center;
}
.notification-ui_icon .unread-notification {
  display: inline-block;
  height: 7px;
  width: 7px;
  border-radius: 7px;
  background-color: #66BB6A;
  position: absolute;
  top: 7px;
  left: 12px;
}

@media (min-width: 900px) {
  .notification-ui_icon .unread-notification {
    left: 20px;
  }
}

.notification-ui_dd {
  padding: 0;
  border-radius: 10px;
  -webkit-box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
          box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
  border: 0;
  max-width: 400px;
}

@media (min-width: 900px) {
  .notification-ui_dd {
    min-width: 400px;
    position: absolute;
    left: -192px;
    top: 70px;
  }
}

.notification-ui_dd:after {
  content: "";
  position: absolute;
  top: -30px;
  left: calc(50% - 7px);
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}

.notification-ui_dd .notification-ui_dd-header {
  border-bottom: 1px solid #ddd;
  padding: 15px;
}

.notification-ui_dd .notification-ui_dd-header h3 {
  margin-bottom: 0;
}

.notification-ui_dd .notification-ui_dd-content {
  max-height: 500px;
  overflow: auto;
}

.notification-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 0;
  margin: 0 25px;
  border-bottom: 1px solid #ddd;
}

.notification-list--unread {
  position: relative;
}

.notification-list--unread:before {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  height: calc(100% + 1px);
  border-left: 2px solid #52af06;
}

.notification-list .notification-list_img img {
  height: 48px;
  width: 48px;
  border-radius: 50px;
  margin-right: 20px;
}

.notification-list .notification-list_detail p {
  margin-bottom: 5px;
  line-height: 1.2;
}

.notification-list .notification-list_feature-img img {
  height: 48px;
  width: 48px;
  border-radius: 5px;
  margin-left: 20px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap);body {

font-family: "Roboto", sans-serif;

background: #E6E9ED;

min-height: 100vh;

position: relative;

}

.notification-ui a:after {

display: none;

}

.notification-ui_icon {

position: relative;

}

.navbar-collapse {

flex-basis: 100%;

flex-grow: unset !important;

align-items: center;

}

.notification-ui_icon .unread-notification {

display: inline-block;

height: 7px;

width: 7px;

border-radius: 7px;

background-color: #66BB6A;

position: absolute;

top: 7px;

left: 12px;

}

@media (min-width: 900px) {

.notification-ui_icon .unread-notification {

left: 20px;

}

.notification-ui_dd {

padding: 0;

border-radius: 10px;

-webkit-box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);

box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);

border: 0;

max-width: 400px;

}

@media (min-width: 900px) {

.notification-ui_dd {

min-width: 400px;

position: absolute;

left: -192px;

top: 70px;

}

.notification-ui_dd:after {

content: "";

position: absolute;

top: -30px;

left: calc(50% - 7px);

border-top: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 15px solid #fff;

border-left: 15px solid transparent;

}

.notification-ui_dd .notification-ui_dd-header {

border-bottom: 1px solid #ddd;

padding: 15px;

}

.notification-ui_dd .notification-ui_dd-header h3 {

margin-bottom: 0;

}

.notification-ui_dd .notification-ui_dd-content {

max-height: 500px;

overflow: auto;

}

.notification-list {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

padding: 20px 0;

margin: 0 25px;

border-bottom: 1px solid #ddd;

}

.notification-list--unread {

position: relative;

}

.notification-list--unread:before {

content: "";

position: absolute;

top: 0;

left: -25px;

height: calc(100% + 1px);

border-left: 2px solid #52af06;

}

.notification-list .notification-list_img img {

height: 48px;

width: 48px;

border-radius: 50px;

margin-right: 20px;

}

.notification-list .notification-list_detail p {

margin-bottom: 5px;

line-height: 1.2;

}

.notification-list .notification-list_feature-img img {

height: 48px;

width: 48px;

border-radius: 5px;

margin-left: 20px;

}

SCSS Code

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');

$green:#66BB6A;
$blue:#29B6F6;
$background-color:#E6E9ED;

// Mixin
@mixin phone {
  @media (max-width: 599px) { @content; }
}
@mixin tablet {
  @media (min-width: 600px) { @content; }
}
@mixin laptop {
  @media (min-width: 900px) { @content; }
}
@mixin desktop {
  @media (min-width: 1200px) { @content; }
}

body{
	font-family: "Roboto", sans-serif;
	background:$background-color;
	min-height:100vh;
	position: relative;
}

.notification-ui{
	a{
		&:after{
			display: none;
		}
	}
}
.notification-ui_icon{
	position: relative;
	.unread-notification{
		display:inline-block;
		height:7px;
		width:7px;
		border-radius:7px;
		background-color:$green;
		position:absolute;
		top:7px;
		left:12px;
		@include laptop{
			left:20px;
		}
	}
}

.notification-ui_dd{
	padding:0;
	border-radius: 10px;
	box-shadow: 0 5px 20px -3px rgba(0,0,0,0.16);
	border: 0;
	max-width: 400px;
	@include laptop{
		min-width: 400px;
		position: absolute;
	    left: -192px;
	    top: 70px;
	}
    &:after{
    	content:"";
    	position: absolute;
    	top:-30px;
    	left:calc(50% - 7px);
    	border-top:15px solid transparent;
    	border-right:15px solid transparent;
    	border-bottom:15px solid #fff;
    	border-left:15px solid transparent;
    }
	.notification-ui_dd-header{
		border-bottom:1px solid #ddd;
		padding:15px;
		h3{
			margin-bottom: 0;
		}
	}
	.notification-ui_dd-content{
		max-height:500px;
		overflow: auto;
	}
	.notification-ui_dd-footer{}
}

.notification-list{
	display: flex;
	justify-content: space-between;
	padding:20px 0;
	margin:0 25px;
	border-bottom: 1px solid #ddd;
	&--unread{
		position: relative;
		&:before{
			content:"";
			position: absolute;
			top:0;
			left:-25px;
			height:calc(100% + 1px);
			border-left: 2px solid $blue;
		}
	}
	.notification-list_img{
		img{
			height:48px;
			width:48px;
			border-radius:50px;
			margin-right:20px;
		}
	}
	.notification-list_detail{
		p{
			margin-bottom: 5px;
			line-height:1.2;
		}
	}
	.notification-list_feature-img{
		img{
			height:48px;
			width:48px;
			border-radius:5px;
			margin-left:20px;
		}
	}
}<gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;">

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');

$green:#66BB6A;

$blue:#29B6F6;

$background-color:#E6E9ED;

// Mixin

@mixin phone {

@media (max-width: 599px) { @content; }

}

@mixin tablet {

@media (min-width: 600px) { @content; }

}

@mixin laptop {

@media (min-width: 900px) { @content; }

}

@mixin desktop {

@media (min-width: 1200px) { @content; }

}

body{

font-family: "Roboto", sans-serif;

background:$background-color;

min-height:100vh;

position: relative;

}

.notification-ui{

&:after{

display: none;

}

.notification-ui_icon{

position: relative;

.unread-notification{

display:inline-block;

height:7px;

width:7px;

border-radius:7px;

background-color:$green;

position:absolute;

top:7px;

left:12px;

@include laptop{

left:20px;

}

.notification-ui_dd{

padding:0;

border-radius: 10px;

box-shadow: 0 5px 20px -3px rgba(0,0,0,0.16);

border: 0;

max-width: 400px;

@include laptop{

min-width: 400px;

position: absolute;

left: -192px;

top: 70px;

}

&:after{

content:"";

position: absolute;

top:-30px;

left:calc(50% - 7px);

border-top:15px solid transparent;

border-right:15px solid transparent;

border-bottom:15px solid #fff;

border-left:15px solid transparent;

}

.notification-ui_dd-header{

border-bottom:1px solid #ddd;

padding:15px;

h3{

margin-bottom: 0;

}

.notification-ui_dd-content{

max-height:500px;

overflow: auto;

}

.notification-ui_dd-footer{}

}

.notification-list{

display: flex;

justify-content: space-between;

padding:20px 0;

margin:0 25px;

border-bottom: 1px solid #ddd;

&--unread{

position: relative;

&:before{

content:"";

position: absolute;

top:0;

left:-25px;

height:calc(100% + 1px);

border-left: 2px solid $blue;

}

.notification-list_img{

img{

height:48px;

width:48px;

border-radius:50px;

margin-right:20px;

}

.notification-list_detail{

margin-bottom: 5px;

line-height:1.2;

}

.notification-list_feature-img{

img{

height:48px;

width:48px;

border-radius:5px;

margin-left:20px;

}

}<gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;">

Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notification UI Design</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container"> <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown notification-ui"> <a class="nav-link dropdown-toggle notification-ui_icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i> <span class="unread-notification"></span> </a>
            <div class="dropdown-menu notification-ui_dd" aria-labelledby="navbarDropdown">
              <div class="notification-ui_dd-header">
                <h3 class="text-center">Notification</h3>
              </div>
              <div class="notification-ui_dd-content">
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user1.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Rahul Singh</b> reacted to your post</p>
                    <p><small>10 mins ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random1.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user2.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Karan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random2.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user3.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Aryan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random3.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user4.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Neha</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random4.jpg" alt="Feature image"> </div>
                </div>
              </div>
              <div class="notification-ui_dd-footer text-center py-3"> <a href="#!" class="btn btn-success btn-block">View All</a> </div>
            </div>
          </li>
          <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Signup</a> </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Notification UI Design</title>

</head>

<body>

<div class="container"> <a class="navbar-brand" href="#">Navbar</a>

<h3 class="text-center">Notification</h3>

</div>

<p><b>Rahul Singh</b> reacted to your post</p>

</div>

</div>

<p><b>Karan</b> reacted to your post</p>

</div>

</div>

<p><b>Aryan</b> reacted to your post</p>

</div>

</div>

<p><b>Neha</b> reacted to your post</p>

</div>

</div>

</div>

</li>

<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Login</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Signup</a> </li>

</ul>

</div>

</nav>

</header>

</body>

</html>

Download Full Source code of Notification UI Design

Download Source code for Notification UI Design

1 file(s) 110KB

Download

Notification UI Design Free Download