Semantic-UI Segment Raised Type
Last Updated :
27 Feb, 2022
Semantic UI is an open-source CSS framework based on less and jQuery. It comes with its pre-built modules and elements which enables developers to develop responsive and beautiful websites in less time. In this article, we will be seeing the Semantic UI Segment Raised Type.
A Segment is used to group similar content which makes the user experience better and helps users to navigate through your content efficiently. A Raised segment is a type of segment that is formatted to raise above the page by applying the box-shadow property to it.
Semantic UI Segment Raised Type Class:
- raised: This class is used on the segment element to make it look raised above the rest of the page.
Syntax:
<div class="ui segment raised">
...
</div>
Example 1: The below example shows a simple use of the raised class to raise a segment above the page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Segment Raised Type</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align: center;
}
h3#subheading {
margin-top: 0px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 id="subheading">
Semantic UI - Segment Raised Type
</h3>
</div>
<div class="ui segment">
<p>This is a normal segment.</p>
</div>
<div class="ui segment raised">
<p>This is a raised segment.</p>
</div>
<div class="ui segment">
<p>This is a normal segment.</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Raised Type
Example 2: The example below shows the use of raised class on the different variations of the segment.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Segment Raised Type</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align: center;
}
h3#subheading {
margin-top: 0px;
margin-bottom: 30px;
}
.column {
display: flex !important;
justify-content: center;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 id="subheading">
Semantic UI - Segment Raised Type
</h3>
</div>
<p><b>Raised Type Segment with Color Variation</b></p>
<div class="ui segment raised red ">
<p>This is a red colored segment.</p>
</div>
<div class="ui segment red ">
<p>This is a red colored segment with
<i>raised</i> class.</p>
</div>
<p><b>Raised Type Variation with Circular Variation</b></p>
<div class="ui grid">
<div class="eight wide column">
<div class="ui segment raised circular ">
<img height="50"
src=
</div>
</div>
<div class="eight wide column">
<div class="ui segment circular ">
<img height="50"
src=
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Raised Type
Reference: https://semantic-ui.com/elements/segment.html#raised
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...