Semantic-UI Item Divided Variation

Last Updated : 20 Feb, 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 Item presents a large collection of similar types of data on a website. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Divided Variation helps to divide the items to distinguish the items more clearly. This helps to separate grouped items. A divider line appears between each item to distinguish them properly.

Semantic UI Item Divided Variation Classes:

divided: This class is added to the items container and then a divider line is placed between each component.

Syntax: Add the divided class to the items container to divide the items as follows:

<div class="ui divided items">
    ...
</div>

Example: In the following example, we have made the divided items using the divided class.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet"
    />    
    <style> 
      body { 
        padding: 10px; 
        margin: 10px; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1>  GeeksforGeeks </h1> 
        </div> 
        <strong>  Semantic UI Item Divided Variation  </strong> 
      </center>     
  
    <div class="ui divided items"> 
      <div class="item"> 
        <div class="ui small image"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          /> 
        </div> 
        <div class="middle aligned content"> 
          <div class="header"> 
            Data Structures and Algorithms 
          </div> 
          <div class="meta"> 
            <i class="like icon"></i> 
            <span class="likes"> 
              31 Likes 
            </span> 
          </div> 
        </div> 
      </div> 
      <div class="item"> 
        <div class="ui small image"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          /> 
        </div> 
        <div class="middle aligned content"> 
          <div class="header"> 
            Machine Learning 
          </div> 
          <div class="meta"> 
            <i class="favorite icon"></i> 
            <span class="likes"> 
              123 Favourites 
            </span> 
          </div> 
        </div> 
      </div> 
   </div> 
  </body> 
</html>