Semantic-UI Segment Raised Type
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < 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 > < 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" >w3wiki</ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < 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 > < 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" >w3wiki</ 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 = "https://media.w3wiki.net/wp-content/uploads/20220115184050/gfglogo-300x300.png" > </ div > </ div > < div class = "eight wide column" > < div class = "ui segment circular " > < img height = "50" src = "https://media.w3wiki.net/wp-content/uploads/20220115184050/gfglogo-300x300.png" > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/segment.html#raised
Contact Us