Semantic-UI Segment Variations
Last Updated :
22 Apr, 2022
Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic UI Segment is a segment is a container used to place contents of the same type or same category. It is used to group related items.
Semantic UI Segment Variations:
- Inverted: This is used to invert the color of the segment for creating contrast.
- Attached: This is used to attach a segment to other content on any page.
- Padded: This is used to give padding to the segment.
- Compact: This is used to generate a segment that covers as much space as it is needed.
- Colored: This is used to color a segment.
- Emphasis: This is used to make a segment to be more or less emphasized.
- Circular: This is used to make a circular segment.
- Clearing: This is used to clear the float of a segment.
- Floated: This is used to align a segment to the left or right of the segment.
- Text Alignment: This is used to align a text of the segment on either side or center.
- Basic: This is used to create a segment that has no special formatting other than padding around it.
Syntax:
<div class="ui segment-variation-name segment">
.......
</div>
Example 1: Below is the code that demonstrates the use of Segment Variation inverted Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 40rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui inverted segment">
<p>GeeksforGeeks is a computer science portal.</p>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 2: Below is the code that demonstrates the use of Segment Variation attached Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 40rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui top attached segment">
<p>Topmost attached segment</p>
</div>
<div class="ui attached segment">
<p>Both sides attached segment</p>
</div>
<div class="ui bottom attached segment">
<p>Bottommost attached segment</p>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 3: Below is the code that demonstrates the use of Segment Variation padded Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 40rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui padded segment">
<p>GeeksforGeeks is a Computer Science portal!</p>
</div>
<div class="ui very padded segment">
<p>GeeksforGeeks is a Computer Science portal!</p>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 4: Below is the code that demonstrates the use of Segment Variation compact Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 60rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui compact segments">
<div class="ui segment">
<p>GeeksforGeeks</p>
</div>
<div class="ui segment">
<p>It is a Computer Science Portal!</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 5: Below is the code that demonstrates the use of Segment Variation colored Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Segment Variations </title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>
Semantic-UI Segment Color Variations
</strong>
<br />
<br />
<div class=" ui container">
<div class="ui violet inverted segment">
Violet
</div>
<div class="ui purple inverted segment">
Purple
</div>
<div class="ui pink inverted segment">
Pink
</div>
<div class="ui brown inverted segment">
Brown
</div>
<div class="ui black inverted segment">
Black
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 6: Below is the code that demonstrates the use of Segment Variation emphasis Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui inverted segment">
<p>GeeksforGeeks.</p>
</div>
<div class="ui secondary inverted segment">
<p>It is a Computer Science Portal</p>
</div>
<div class="ui tertiary inverted segment">
<p>For all Geeks and professionals!</p>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 7: Below is the code that demonstrates the use of the Segment Variation circular Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
<style>
.circular{
height: 80px;
width: 80px;
}
</style>
</head>
<body style="margin-inline: 50rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui inverted circular segment">
<h2 class="ui inverted header">
Complete Interview Preparation
<div class="sub header">Rs 5000/-</div>
</h2>
</div>
<div class="ui circular segment">
<h2 class="ui header">
DSA-Self Paced
<div class="sub header">Rs 3000/-</div>
</h2>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 8: Below is the code that demonstrates the use of Segment Variation clearing Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 50rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui clearing segment">
<div class="ui left green floated button">
Floated
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 9: Below is the code that demonstrates the use of Segment Variation floated Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 40rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui right floated segment">
<p>
Left Segment
</p>
</div>
<div class="ui left floated segment">
Right Segment
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 10: Below is the code that demonstrates the use of Segment Variation text-alignment Class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
</head>
<body style="margin-inline: 40rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui left aligned segment">
Left-GeeksforGeeks
</div>
<div class="ui center aligned segment">
Center-GeeksforGeeks
</div>
<div class="ui right aligned segment">
Right-GeeksforGeeks
</div>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Example 11: Below is the code that demonstrates the use of Segment Variation basic Class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Segment Basic Variation
</strong>
<br />
<br />
<button class="ui inverted green button"
onclick="toggleBasicVariation()">
Toggle Basic Variation
</button>
</center>
<div class="ui basic segment">
<h3>Data Structures</h3>
<ul class="ui bulleted list">
<li class="item">Stack</li>
<li class="item">Heap</li>
<li class="item">Array</li>
</ul>
</div>
<div class="ui basic segment">
<h3>Algorithms</h3>
<ul class="ui bulleted list">
<li class="item">Searching</li>
<li class="item">Sorting</li>
<li class="item">Graph</li>
</ul>
</div>
<div class="ui basic segment">
<h3>Programming Languages</h3>
<ul class="ui bulleted list">
<li class="item">Java</li>
<li class="item">C++</li>
<li class="item">Python</li>
</ul>
</div>
</div>
<script>
const toggleBasicVariation = () => {
$('.ui.segment').toggleClass('basic')
}
</script>
</body>
</html>
|
Output:
Semantic-UI Segment Variations
Reference link: https://semantic-ui.com/elements/segment.html#inverted
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...