Open In App

Semantic-UI Message Compact Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. 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. Semantic-UI has really cool headers that can be used with Text, Icons, and many more.

A message shows information related to some content. Semantic-UI has a really cool message element that can be used with Text, Icons, and many more. Semantic UI has different types of message variations such as size variations, warning variations, compact variations, and colored variations messages. In this article, we will learn about the compact variation of messages in Semantic UI.

The compact message in semantic UI can only take up the width of its content. It does not take the width of its parent container like a normal message element. To convert a normal message element into a compact message in semantic UI, we use the compact class along with the ui and message classes.

Semantic UI message compact variation class:

  • compact: The compact class makes the message element take up only the width of its contents.

Syntax:

<div class="ui compact message">
content....
</div>

Example 1: This example demonstrates the difference between a normal and compact message element in semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Message</strong>
        <br /><br />
    </center>
    <div class="ui compact message">
        <p>This is a compact message.</p>
    </div>
    <div class="ui message">
        <p>This is a normal message.</p>
    </div>
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>


Output:

Output

Example 2: This example demonstrates the compact message element with different colors in semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Message</strong>
        <br /><br />
    </center>
    <div class="ui red compact message">Red Compact GeeksforGeeks</div>
    <div class="ui orange compact message">Orange Compact GeeksforGeeks</div>
    <div class="ui yellow compact message">Yellow Compact GeeksforGeeks</div>
    <div class="ui olive compact message">Olive Compact GeeksforGeeks</div>
    <div class="ui green compact message">Green Compact GeeksforGeeks</div>
    <div class="ui teal compact message">Teal Compact GeeksforGeeks</div>
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>


Output:

Output

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



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