Semantic-UI Message List Type

Last Updated : 10 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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

A message is an important component of our website that displays some kind of information to the user. Now, this message can have different types i.e. the message can be displayed in different types and one such type is the Message List Type.

Semantic UI Message List Type Class:

message: It is a class that displays a message.
list: It is used to create a list. The message class can be its parent class in order to display a message in the form of a list.

Syntax:

<div class="ui message">
    <ul class="list">
          <li>...</li>
           ...
    </ul>
</div>

Example 1: In the following program, we will be creating a message list.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Message List Type</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
 
<body>
    <br>
    <div class="ui green huge header">
        GeeksforGeeks
    </div>
     
    <div class="ui large header">
        Message List Type
    </div>
     
    <div class="ui message">
        <div class="header">
            Cricket Facts
        </div>
        <ul class="list">
             
            <!--List Message-->
            <li>Highest Runs Scorer Is Sachin</li>
            <li>Highest Wicket Taker Is Muralitharan</li>
            <li>Fastest Runs Getter Is Russell</li>
        </ul>
    </div>
</body>
 
</html>

Output:

Example 2: In the following example, we will be creating a normal message and a message list in order to view the difference between them.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Message List Type</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
 
</head>
 
<body>
    <br>
    <div class="ui green huge header">
        GeeksforGeeks
    </div>
    <br>
     
    <div class="ui large header">
        Basic Message
    </div>
     
    <div class="ui message">
        <div class="header">
            Football Facts
        </div>
         
 
<p>
            Mo Salah is the King Of Football.
            Messi is known as the God Of Football.
            Liverpool F.C. is the most successful
            English Club.
        </p>
 
 
    </div>
    <div class="ui large header">Message List</div>
    <div class="ui message">
        <div class="header">
            Football Facts
        </div>
        <ul class="list">
            <!--List Message-->
            <li>Mo Salah is the King Of Football</li>
            <li>Messi is known as the God Of Football</li>
            <li>
                Liverpool F.C. is the most 
                successful English Club
            </li>
        </ul>
    </div>
</body>
 
</html>