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...