Open In App

Semantic-UI List Types

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

A list is an integral component of our website. It is an easy way to display a list of items which many a time is necessary for our website. It is used to group content that is related to each other. 

Semantic-UI List Types: There are four types of lists in the Semantic UI.

  • List: It is a list that groups the related content.
  • Ordered: A list that is ordered in numbers.
  • Bulleted: A list whose contents are marked with a bullet.
  • Link: A list that is formatted in order to have navigation links.

Syntax:

<div class="ui ordered list">

The syntax for the other types of lists is the same and the only difference is the name of the list that will be replaced.

Example 1: The following program will demonstrate the use of the list type and ordered type.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic-UI List Types</title>
  <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 rel="stylesheet"
        href=
   <script src=
   </script>
</head>
<body>
<br>
  <div class="ui green huge header">GeeksforGeeks</div>
  <div class="ui large header">Semantic-UI List Types</div>
  <div class="ui medium header">List</div> <!--Heading-->
  <div class="ui list"> <!--Creating List-->
    <div class="item">
      Cricket
    </div>
    <div class="item">
      Football
    </div>
    <div class="item">
      Tennis
    </div>
  </div>
 
  <div class="ui medium header">Ordered List</div> <!--Heading-->
  <div class="ui ordered list"> <!--Creating Ordered List-->
    <div class="item">
      Cricket
    </div>
    <div class="item">
      Football
    </div>
    <div class="item">
      Tennis
    </div>
  </div>
</body>
</html>


 Output:

Semantic-UI List Types

Semantic-UI List Types

Example 2: The following program will demonstrate the use of the bulleted type and link type.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic-UI List Types</title>
  <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 rel="stylesheet"
        href=
   <script src=
   </script>
</head>
<body>
<br>
  <div class="ui green huge header">GeeksforGeeks</div>
  <div class="ui large header">Semantic-UI List Types</div>
  <div class="ui medium header">Bulleted List</div> <!--Heading-->
  <div class="ui bulleted list"> <!--Creating Bulleted List-->
    <div class="item">
      Thomas
    </div>
    <div class="item">
      Arthur
    </div>
    <div class="item">
      John
    </div>
    <div class="item">
      Micheal
    </div>
  </div>
 
  <div class="ui medium header">Link List</div> <!--Heading-->
  <div class="ui link list"> <!--Creating Link List-->
    <div class="active item">
      Thomas
    </div>
    <div class="item">
      Arthur
    </div>
    <div class="item">
      John
    </div>
    <div class="item">
      Micheal
    </div>
  </div>
</body>
</html>


Output”

Semantic-UI List Types

Semantic-UI List Types

Reference: https://semantic-ui.com/elements/list.html



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads