Open In App

Semantic-UI Message Attached 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, attached variations, compact variations, and colored variations messages. In this article, we will learn about the attached variation of messages in Semantic UI.

The attached message in semantic UI can be formatted to attach itself to other content. It does not have any bottom margin like a normal message element. To convert a normal message element into an attached message in semantic UI, we use the attached class along with the ui and message classes.

Semantic UI message attached variation class:

  • attached: The attached class makes the message element attached to other content by making its bottom margin zero.

Syntax:

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

Example 1: This example demonstrates the attached message element in semantic UI.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Message Attached Variation</title>
    <link href=
          rel="stylesheet" />
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Message</strong>
        <br /><br />
    </center>
    <div class="ui attached message">Attached message</div>
    <div class="ui attached segment">
        <img src=
    </div>
</body>
</html>


Output:

Semantic-UI Message Attached Variation

Semantic-UI Message Attached Variation

Example 2: This example demonstrates multiple attached message elements with error and warning variation in semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Message Attached Variation</title>
    <link href=
          rel="stylesheet"/>
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Message</strong>
        <br /><br />
    </center>
    <div class="ui attached error message">
      Attached message
    </div>
    <div class="ui attached segment">
        <p>
          A Computer Science portal for geeks. It contains
          well written, well thought and well explained computer
          science and programming articles
        </p>
        <img src=
        <p>
          A Computer Science portal for geeks. It contains 
          well written, well thought and well explained computer
          science and programming articles.
        </p>
  
    </div>
    <div class="ui bottom attached warning message">
        <i class="icon help"></i>
        Dont miss opportunity learn at GeeksforGeeks.
    </div>
</body>
</html>


Output:

Semantic-UI Message Attached Variation

Semantic-UI Message Attached Variation

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



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