Semantic-UI Message Colored Variation
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 Icon messages, List messages, Dismissible messages, and colored messages. In this article, we will learn about the colored variations of messages in Semantic UI.
To create a colored variation of the Semantic UI message, we use the desired color as a class along with the ui and message classes. For example, if we need a red-colored variation of Semantic UI message, we use red, ui, and message as classes to parent <div>. This makes the background color of the message element the mentioned color.
Semantic-UI Card Colored Variation Class:
- red: This class is used to set the color to red.
- orange: This class is used to set the color to orange.
- yellow: This class is used to set the color to yellow.
- olive: This class is used to set the color to olive.
- green: This class is used to set the color to green.
- teal: This class is used to set the color to teal.
- blue: This class is used to set the color to blue.
- purple: This class is used to set the color to purple.
- violet: This class is used to set the color to violet.
- pink: This class is used to set the color to pink.
- brown: This class is used to set the color to brown.
- grey: This class is used to set the color to grey.
- black: This class is used to set the color to black
Syntax:
<div class="ui Colored-Variation-Class message">
// content
</div>
Example 1: This example demonstrates red, orange, yellow, olive, green, and teal-colored variations of the Semantic-UI message.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Message Colored Variation</title> <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"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script></head><body style="padding: 30px;"> <center> <h1 style="color: green;"> w3wiki </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui red message"> Red w3wiki </div> <div class="ui orange message"> Orange w3wiki </div> <div class="ui yellow message"> Yellow w3wiki </div> <div class="ui olive message"> Olive w3wiki </div> <div class="ui green message"> Green w3wiki </div> <div class="ui teal message"> Teal w3wiki </div></body></html> |
Output:
Semantic-UI Message Colored Variation
Example 2: This example demonstrates blue, violet, purple, pink, brown, and black colored variations of the semantic-Ui message.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Message Colored Variation</title> <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"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script></head><body style="padding: 30px;"> <center> <h1 style="color: green;"> w3wiki </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui blue message"> Blue w3wiki </div> <div class="ui violet message"> Violet w3wiki </div> <div class="ui purple message"> Purple w3wiki </div> <div class="ui pink message"> Pink w3wiki </div> <div class="ui brown message"> Brown w3wiki </div> <div class="ui black message"> Black w3wiki </div></body></html> |
Output:
Semantic-UI Message Colored Variation
Reference: https://semantic-ui.com/collections/message.html#colored