Open In App

Semantic-UI Message Positive / Success Variation

Improve
Improve
Like Article
Like
Save
Share
Report

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. Positive / Success Variation is used to display positive and success types of messages. We can use positive class when we want to show some positive information and success class when we want to show our task success. In this article, we will discuss the Positive / Success Variation of Message in Semantic UI.

Semantic-UI Message Positive / Success Variation Classes:

  • positive: This class is used to display a positive message.
  • success: This class is used to display the successful task completion messages.

Syntax:

<div class="ui  Positive/Success-Variation-Classes message">
       ...
</div>

Example 1: The following code demonstrates the Semantic-UI Message Positive Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <link href=
   rel="stylesheet"/>
</head>
  
<body>
  <center>
    <h2 style="color: green">
      GeeksforGeeks
    </h2>
      
    <h3>
      Semantic UI Message Positive Variation
    </h3>
  </center>
      
  <div class="ui positive message">
    <div class="header">
      Reward from GeeksforGeeks
    </div>
  
    <p>Go to
      <a target="_blank" 
         href="https://www.geeksforgeeks.org/">
      </a>
      to claim the reward.
    </p>
  </div>
</body>
  
</html>


Output:

Semantic-UI Message Positive / Success Variation

Semantic-UI Message Positive / Success Variation

Example 2: The following code demonstrates the Semantic-UI Message Success Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <link href=
    rel="stylesheet"/>
</head>
  
<body>
  <center>
    <h2 style="color: green">
      GeeksforGeeks
    </h2>
      
    <h3>
      Semantic UI Message Success Variation
    </h3>
  </center>
      
  <div class="ui success message">
    <div class="header">
      Registration Successful!!
    </div>
    <p>
      You can now login to check your details.
    </p>
  
  </div>
</body>
  
</html>


Output:

Semantic-UI Message Positive / Success Variation

Semantic-UI Message Positive / Success Variation

Reference: https://semantic-ui.com/collections/message.html#positive–success



Last Updated : 10 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads