Semantic-UI Message Warning Variation

Last Updated : 14 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
Semantic UI provides the users with various different message type classes that can be used for different purposes to display a message with a good interface. In this article let us see about the messages of warning variation in Semantic UI.

Semantic-UI floating variation type message classes:

warning: This indicates that the message is of warning type by a color.

Syntax:

 <div class="ui warning message">
    .....
 </div>

Example-1: This example demonstrates the basic message warning variation.

HTML

<!DOCTYPE html>
<html>
   <head>
      <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
      <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
         integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous">
      </script>
      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
      </script>
   </head>
   <body>
      <center>
         <h1 class="ui green header">GeeksforGeeks</h1>
         <strong>
         Semantic-UI Message Warning variation
         </strong>
      </center>
      <br />
      <br />
      <div class="ui container">
         <div class="ui warning message">
            <div class="header">
               Some files not loaded enable JavaScript to load them
            </div>
         </div>
      </div>
   </body>
</html>

Output :

Semantic-UI Message Warning Variation

Example-2: This example demonstrates the message warning variation.

HTML

<!DOCTYPE html>
<html>
   <head>
      <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
      <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
              integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous">
      </script>
      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
      </script>
   </head>
   <body>
      <center>
         <h1 class="ui green header">GeeksforGeeks</h1>
         <strong>
         Semantic-UI Message Warning variation
         </strong>
      </center>
      <br />
      <br />
      <div class="ui container">
         <div class="ui warning message transition">
            <i class="close icon"></i>
            <div class="header">
               A newer version available download
              to have the better experience
            </div>
            Visit <a href="#"> this </a> page to know more about the update
         </div>
      </div>
   </body>
   <script>
      $('.message .close').on('click', function () {
        $(this).closest('.message').transition('fade up');
      });      
   </script>
</html>