Semantic-UI List Celled Variation

Last Updated : 22 Feb, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various different lists classes which are with different variations which are useful for different purposes like building the side or top navbars or any other. In this article, let us see about the List Celled Variation in Semantic UI.

Semantic UI list Celled Variation Classes:

celled: It sets the list rows as visible cells by some dividers in the list.

Syntax:

<div class="ui celled list">
  <div class="item">...</div>
  <div class="item">...</div>
  ....
</div>

Example 1: The following code demonstrates the celled list.

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> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic UI List celled variation</strong> 
        <br /> 
        <br /> 
    </center> 
  
    <div class="ui celled list"> 
        <div class="item">Introduction</div> 
        <div class="item">Topic-1</div> 
        <div class="item">Topic-2</div> 
        <div class="item">Topic-3 
            <div class="list"> 
                <div class="item">Topic 3.1</div> 
                <div class="item">Topic 3.2</div> 
                <div class="item">Topic 3.3</div> 
                <div class="item">Topic 3.4</div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Semantic-UI List Celled Variation

Example 2: The following code demonstrates the horizontal celled as a hyperlinked list.

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> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic UI List celled variation</strong> 
        <br /> 
        <br /> 
  
        <div class="ui horizontal celled list"> 
            <a class="item"> 
                Home 
            </a> 
            <a class="item"> 
                About us 
            </a> 
            <a class="item"> 
                Contact us 
            </a> 
            <a class="item"> 
                Report issue 
            </a> 
        </div> 
    </center> 
</body> 
  
</html>