Skip to content
Related Articles

Related Articles

Semantic-UI Message Types

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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

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

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

Semantic-UI Message Types

Example 4: This example demonstrates the dismissable 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 dismissable message</p>
 
</b>
           <div class="ui message ">
              <i class="close icon"></i>
               <div class="header">
                  Welcome to GeeksforGeeks!
               </div>
              
 
<p>This is a special dismissable 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!