Semantic-UI Message Types
Last Updated :
26 Dec, 2022
Semantic UI offers many components for users to design their interface. One of them is “Message”. You can build any components as per your usage. There are different types of messages.
We will create a UI to show the different types of messages. After creating this basic template you can work with different components of Semantic UI.
Semantic UI Message Types class:
Syntax:
<div class="ui icon message">
....
</div>
Example 1: This example demonstrates the basic message using the message class.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI message types</p>
</b>
<div class="ui message">
<div class="header">
Message header
</div>
<p>This is the basic message.</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Message Types
Example 2: This example demonstrates the message using the list class. The list is implemented inside the HTML ul element.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI list message</p>
</b>
<div class="ui message" style="margin:50px">
<div class="header">
header for list message
</div>
<ul class="list">
<li>Introduction to Propositional Logic</li>
<li>Propositional Equivalences</li>
<li>Predicates and Quantifiers</li>
</ul>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Message Types
Example 3: This example demonstrates the message using the icon class.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI icon message</p>
</b>
<div class="ui icon message" >
<i class="inbox icon"></i>
<div class="content">
<div class="header">
Icon Message
</div>
<p>Get your mails ...</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Message Types
Example 4: This example demonstrates the dismissible message using the icon class. Messages can be hidden by clicking on the cross sign with the help of the jQuery click() method.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI dismissible message</p>
</b>
<div class="ui message ">
<i class="close icon"></i>
<div class="header">
Welcome to GeeksforGeeks!
</div>
<p>This is a special dismissible message which
you can dismiss by clicking on cross sign.
</p>
</div>
</div>
</div>
<script>
$('.message .close').on('click', function() {
$(this).closest('.message').transition('hide');
});
</script>
</body>
</html>
|
Output:
Semantic-UI Message Types
Reference: https://semantic-ui.com/collections/message.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...