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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 May, 2023
Like Article
Save Article