Semantic-UI Message
Last Updated :
11 May, 2023
Semantic UI is an open-source framework that uses CSS and jQuery to build a great user interface. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A message shows information related to some content.
Example 1:
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<div class="ui message">
<div class="header">
Geeksforgeeks
</div>
<p>A computer science Portal.</p>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output: 
Example 2: List Message
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<div class="ui message">
<div class="header">
New Courses
</div>
<ul>
<li>Data Structure</li>
<li>AngularJS</li>
<li>NodeJS</li>
</ul>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output: 
Example 3: This example creating a Dismissible Message. This requires the jQuery library to be imported.
Syntax:
$('.message .close').on('click', function() {
$(this).closest('.message').transition('fade');
});
Complete code:
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<div class="ui message">
<i class="close icon"></i>
<div class="header">
Thank you for Choosing Geeksforgeeks!
</div>
<p>Hope you have great learning here.</p>
</div>
</div>
<script>
$('.message .close').on('click', function () {
$(this).closest('.message').transition('fade');
});
</script>
</body>
</html>
|
Output: 
Note:
- You can add class info, error, success, positive, and warning to change the look of the message. For example: To display the warning message: class=’ui warning message’.
- You can write any color or size class to change the color or size of class respectively.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...