Semantic-UI Message Colored Variation
Last Updated :
06 Dec, 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. 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=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Semantic UI Message</strong>
<br /><br />
</center>
<div class="ui red message">
Red GeeksforGeeks
</div>
<div class="ui orange message">
Orange GeeksforGeeks
</div>
<div class="ui yellow message">
Yellow GeeksforGeeks
</div>
<div class="ui olive message">
Olive GeeksforGeeks
</div>
<div class="ui green message">
Green GeeksforGeeks
</div>
<div class="ui teal message">
Teal GeeksforGeeks
</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=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Semantic UI Message</strong>
<br /><br />
</center>
<div class="ui blue message">
Blue GeeksforGeeks
</div>
<div class="ui violet message">
Violet GeeksforGeeks
</div>
<div class="ui purple message">
Purple GeeksforGeeks
</div>
<div class="ui pink message">
Pink GeeksforGeeks
</div>
<div class="ui brown message">
Brown GeeksforGeeks
</div>
<div class="ui black message">
Black GeeksforGeeks
</div>
</body>
</html>
|
Output:
Semantic-UI Message Colored Variation
Reference: https://semantic-ui.com/collections/message.html#colored
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...