Semantic-UI Segment Variations
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 40rem;" > < center > < h1 class = "ui green header" > w3wiki </ h1 > < h3 > Semantic-UI Segment Variation </ h3 > </ center > < div class = "ui inverted segment" > < p >w3wiki is a computer science portal.</ p > </ div > </ body > </ html > |
Output:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 40rem;" > < center > < h1 class = "ui green header" > w3wiki </ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 40rem;" > < center > < h1 class = "ui green header" > w3wiki </ h1 > < h3 > Semantic-UI Segment Variation </ h3 > </ center > < div class = "ui padded segment" > < p >w3wiki is a Computer Science portal!</ p > </ div > < div class = "ui very padded segment" > < p >w3wiki is a Computer Science portal!</ p > </ div > </ body > </ html > |
Output:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 60rem;" > < center > < h1 class = "ui green header" > w3wiki </ h1 > < h3 > Semantic-UI Segment Variation </ h3 > </ center > < div class = "ui compact segments" > < div class = "ui segment" > < p >w3wiki</ p > </ div > < div class = "ui segment" > < p >It is a Computer Science Portal!</ p > </ div > </ div > </ body > </ html > |
Output:
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 = "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 > </ head > < body > < center > < h1 class = "ui green header" >w3wiki</ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 30rem;" > < center > < h1 class = "ui green header" > w3wiki </ h1 > < h3 > Semantic-UI Segment Variation </ h3 > </ center > < div class = "ui inverted segment" > < p >w3wiki.</ 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 Beginner and professionals!</ p > </ div > </ body > </ html > |
Output:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < style > .circular{ height: 80px; width: 80px; } </ style > </ head > < body style = "margin-inline: 50rem;" > < center > < h1 class = "ui green header" > w3wiki </ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 50rem;" > < center > < h1 class = "ui green header" > w3wiki </ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 40rem;" > < center > < h1 class = "ui green header" > w3wiki </ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body style = "margin-inline: 40rem;" > < center > < h1 class = "ui green header" > w3wiki </ h1 > < h3 > Semantic-UI Segment Variation </ h3 > </ center > < div class = "ui left aligned segment" > Left-w3wiki </ div > < div class = "ui center aligned segment" > Center-w3wiki </ div > < div class = "ui right aligned segment" > Right-w3wiki </ div > </ body > </ html > |
Output:
Example 11: Below is the code that demonstrates the use of Segment Variation basic Class.
HTML
<!DOCTYPE html> < html > < head > < 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 > </ head > < body > < div class = "ui container" > < center > < div class = "ui header green" > < h1 > w3wiki </ 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:
Reference link: https://semantic-ui.com/elements/segment.html#inverted