Skip to content
Related Articles

Related Articles

Semantic-UI Message Compact Variation

Improve Article
Save Article
  • Last Updated : 27 Mar, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!