Semantic-UI Segment Attached Variation

Last Updated : 09 Mar, 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 container used to place contents of the same type or same category. It is used to group related items.

Semantic UI Segment attached variation is used to attach the segments from one another. We can specify the direction for the segments to be attached. We can attach to both sides, top or bottom side.

Semantic UI Segment Attached Variation Classes:

attached: With this class, the segment is attached to both directions.
top: With this class, the segment is attached to the top direction.
bottom: With this class, the segment is attached to the bottom direction.

Syntax: Add the desired attached variation from the above classes and add it to the segment as follows:

<div class="ui top attached segment">
    ...
</div>

Example: In the following example, we have a list of segments that are attached to one another.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"/>     
  </head> 
  
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> GeeksforGeeks</h1> 
        </div> 
        <strong> Semantic UI Segment Attached Variation </strong> 
      </center> 
  
      <div class="ui top attached 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 attached 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 bottom attached 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> 
  </body> 
</html>