Skip to content
Related Articles

Related Articles

Semantic-UI List Content

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. 

The Semantic-UI List is used to group content that is related to each other. In this article, we will discuss Semantic-UI List Content.

Semantic-UI List Content:

  • item: This class is used to create a list of items.
  • icon: This class is used to create items with icons.
  • image: This class is used to create the items with images.
  • link: This class is used to create the items with links.
  • header: This class is used to create the item header.
  • description: This class is used to create the item description.

Syntax:

<div class="ui list">
  <div class="List-Content-Class">
     ....
  </div>
  ....
</div>

Example 1: The following code demonstrates the Semantic-UI List Item Content.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Item </h3>
   
    <div class="ui list">
      <div class="item">
        GeeksforGeeks1
      </div>
      <div class="item">
        GeeksforGeeks2
      </div>
      <div class="item">
        GeeksforGeeks3
      </div>
      <div class="item">
        GeeksforGeeks4
      </div>
      <div class="item">
        GeeksforGeeks5
      </div>
      <div class="item">
        GeeksforGeeks6
      </div>
      <div class="item">
        GeeksforGeeks7
      </div>
    </div>
  </div>
</body>
</html>


Output:

 Semantic-UI List Item Content

Example 2: The following code demonstrates the Semantic-UI List Icon Content.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Icon </h3>
 
    <div class="ui list">
      <a class="item">
        <i class="book icon"></i>
        <div class="content">
          <div class="header"> GeeksforGeeks: </div>
          <div class="description">
            A Computer Science portal
          </div>
        </div>
      </a>
      <a class="item">
        <i class="right triangle icon"></i>
        <div class="content">
          <div class="header">GFG:</div>
          <div class="description">
            Computer science and
            programming articles.
          </div>
        </div>
      </a>
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI List Icon Content

Example 3: The following code demonstrates the Semantic-UI List Image Content.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Image </h3>
 
    <div class="ui list">
      <a class="item">
        <img class="ui avatar image" src=
        <div class="content">
          <div class="header"> GeeksforGeeks: </div>
          <div class="description">
            A Computer Science portal
          </div>
        </div>
      </a>
      <a class="item">
        <img class="ui avatar image" src=
        <div class="content">
          <div class="header">GFG:</div>
          <div class="description">
            Computer science and
            programming articles.
          </div>
        </div>
      </a>
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI List Image Content

Example 4: The following code demonstrates the Semantic-UI List Link Content.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Link </h3>
 
    <div class="ui link list">
      <div class="active item"> GeeksforGeeks </div>
      <a class="item"> Coding </a>
      <a class="item"> DSA </a>
      <a class="item"> Java </a>
      <a class="item"> Python </a>
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI List Link Content

Example 5: The following code demonstrates the Semantic-UI List Header Content.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Header </h3>
 
    <div class="ui list">
      <div class="item">
        <a class="header">GeeksforGeeks</a>
        A Computer Science portal for geeks.
      </div>
      <div class="item">
        <a class="header">GFG</a>
        Portal for geeks.
      </div>
      <div class="item">
        <a class="header">About GFG</a>
        A Computer Science portal for geeks.
      </div>
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI List Header Content

Example 6: The following code demonstrates the Semantic-UI List Description Content.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI List Content </title>
  <link rel="stylesheet" href=
</head>
 
<body>
  <div class="ui container">
    <h2 class="ui header green"> GeeksforGeeks </h2>
    <h3> Semantic-UI List Content - Description </h3>
 
    <div class="ui list">
      <div class="item">
        <div class="content">
          <a class="header"> GeeksforGeeks </a>
          <div class="description">
            A Computer Science portal for geeks.
          </div>
        </div>
      </div>
 
      <div class="item">
        <div class="content">
          <a class="header"> GFG </a>
          <div class="description">
            Portal for geeks.
          </div>
        </div>
      </div>
 
      <div class="item">
        <div class="content">
          <a class="header">About GFG</a>
          <div class="description">
            A Computer Science portal
          </div>
        </div>
      </div>
 
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI List Description Content

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!