Skip to content
Related Articles

Related Articles

Improve Article

Semantic-UI | Message

  • Last Updated : 20 May, 2020
Geek Week

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:




<!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




<!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 Dismissable Message. This requires the jQuery library to be imported.

Syntax:

$('.message .close').on('click', function() {
    $(this).closest('.message').transition('fade');
});

Complete code:




<!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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :