Semantic-UI Message Variations
Last Updated :
22 Apr, 2022
Semantic UI offers a message component for users to display. There are different variations of messages. We will create a UI showing the different variations of messages. After creating this basic template you can work with different components of Semantic UI.
Semantic UI Message Variations class:
- compact: When a user wants the message size to occupy the same width as its content.
- floating: When the user wants to float a message over some UI content.
- attached: When the user wants to attach the message to other content.
- warning: When the user wants to display warning messages.
- info: When the user wants to format a message to display information.
- positive: When the user wants to format a message to display positive or successful information.
- negative: When the user wants to format a message to display negative or error information.
- colored: When the user wants to format a message to different colors.
- size: When the user wants to format a message with different sizes.
Syntax:
<div class="ui compact message">
....
</div>
Example 1: The following example demonstrates messages using compact, floating, and message classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui compact message">
<p>Compact Message in UI.</p>
</div>
<div class="ui floating message">
<p>Floating message !!</p>
</div>
<div class="ui message">
<p>Non floating message ( Basic Message )</p>
</div>
</body>
</html>
|
Output:
Example 2: The following example demonstrates messages using attached, warning, info, and message classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui attached message">
<div class="header">
Welcome to Geeks for Geeks!
</div>
<p>Fill out your email to get started .</p>
</div>
<div class="ui form attached fluid segment">
<input placeholder="Email" type="text">
</div>
<div class="ui warning message">
<p>Warning for the user !! </p>
</div>
<div class="ui info message">
<p>Display information for the user. </p>
</div>
</body>
</html>
|
Output:
Example 3: The following example demonstrates messages using positive, negative, and message classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui positive message">
<p>Congrats , your request has been approved. </p>
</div>
<div class="ui negative message">
<p>Sorry , your request has not been approved. </p>
</div>
</body>
</html>
|
Output:
Example 4: The following example demonstrates messages using red, orange, yellow, olive, green, and message classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui red message">Red</div>
<div class="ui orange message">Orange</div>
<div class="ui yellow message">Yellow</div>
<div class="ui olive message">Olive</div>
<div class="ui green message">Green</div>
</body>
</html>
|
Output:
Example 5: The following example demonstrates messages using mini, tiny, small, large, massive, and message classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui mini message">
Mini Message !!
</div>
<div class="ui tiny message">
Tiny Message !!
</div>
<div class="ui small message">
Small Message !!
</div>
<div class="ui large message">
Large Message !!
</div>
<div class="ui massive message">
Massive Message !!
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/collections/message.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...