Semantic-UI Message Variations
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 = "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 > < 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 = "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 > < div class = "ui attached message" > < div class = "header" > Welcome to Beginner for Beginner! </ 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 = "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 > < 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 = "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 > < 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 = "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 > < 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
Contact Us