Semantic-UI Message Size Variation

Last Updated : 11 Mar, 2022

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 size variations of messages in Semantic UI.

The size variations of message elements help us to set the font size of message element text according to their importance. To create a size variation of the semantic UI message, we use the size classes along with ui and message classes. Following are the size classes in the Semantic UI messages:

mini: This is the smallest font size for the message element.
tiny: This is bigger than mini size but smaller than all others.
small: This is a slightly smaller font size than normal.
large: This is by default the normal size of message element text.
big: This is a slightly bigger font size than normal.
huge: This font size is smaller than massive but bigger than all others.
massive: This is the largest font size for the message element.

Syntax:

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

Example 1: This example demonstrates mini, tiny, and small size variations of the semantic-Ui message.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Message Size Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
        integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body style="padding: 30px;"> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <strong>Semantic UI Message</strong> 
        <br /><br /> 
    </center> 
    <div class="ui mini message">Mini GeeksforGeeks</div> 
    <div class="ui tiny message">Tiny GeeksforGeeks</div> 
    <div class="ui small message">Small GeeksforGeeks</div> 
    <div class="ui message">Default GeeksforGeeks</div> 
</body> 
  
</html> 

Output:

Semantic-UI Message Size Variation

Example 2: This example demonstrates large, big, huge, and massive size variations of the semantic-Ui message.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic-UI Message Size Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
      <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
        integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body style="padding: 30px;"> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <strong>Semantic UI Message</strong> 
        <br /><br /> 
    </center> 
    <div class="ui large message">large GeeksforGeeks</div> 
    <div class="ui big message">big GeeksforGeeks</div> 
    <div class="ui huge message">huge GeeksforGeeks</div> 
    <div class="ui massive message">massive GeeksforGeeks</div> 
</body> 
</html>