Skip to content
Related Articles

Related Articles

Semantic-UI Message Info Variation

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 10 Mar, 2022
Improve Article
Save Article

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=
</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

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=
</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=
      </li>
    </ul>
  </div>
</body>
  
</html>


Output:

Semantic-UI Message Info Variation

Semantic-UI Message Info Variation

Reference: https://semantic-ui.com/collections/message.html#info


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!