Semantic-UI Message Info Variation

Last Updated : 10 Mar, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

Semantic UI Message is used to display a message that can explain the nearby content. Info Variation is used to show any type of information to the user with the help of the info class. In this article, we will discuss the Info Variation of Message in Semantic UI.

Semantic-UI Message Info Variation Class:

info: It is used to create the information block to display the message.

Syntax:

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

Example 1: The following code demonstrates the use of Semantic-UI Message Info Variation with some content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <link rel="stylesheet" 
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green"> 
      GeeksforGeeks 
    </h2> 
      
    <h3> 
      Semantic UI Message Info Variation 
    </h3> 
  </center> 
      
  <div class="ui info message"> 
    <div class="header"> 
      About GeeksforGeeks 
    </div> 
  
    <ul class="list"> 
      <li> 
        A Computer Science portal. 
      </li> 
  
      <li> 
        A Complete Guide for SDE Preparation 
      </li> 
    </ul> 
  </div> 
</body> 
  
</html>

Output:

Semantic-UI Message Info Variation

Example 2: The following code demonstrates the Semantic-UI Message Info Variation with content and image.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <link rel="stylesheet" 
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green"> 
      GeeksforGeeks 
    </h2> 
    <h3> 
      Semantic UI Message Info Variation 
    </h3> 
  </center> 
  <div class="ui info message"> 
    <div class="header"> 
      About GeeksforGeeks 
    </div> 
    <ul class="list"> 
      <li> 
        A Computer Science portal. 
      </li> 
      <li> 
        A Complete Guide for SDE Preparation 
      </li> 
      <li> 
        It contains well written, well thought and well 
        explained computer science and programming articles 
      </li> 
      <li> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="geeksforgeeks" > 
      </li> 
    </ul> 
  </div> 
</body> 
  
</html>