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.
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI List Content </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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:
Example 2: The following code demonstrates the Semantic-UI List Icon Content.
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI List Content </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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:
Example 3: The following code demonstrates the Semantic-UI List Image Content.
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI List Content </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png">
<div class="content">
<div class="header">GFG:</div>
<div class="description">
Computer science and
programming articles.
</div>
</div>
</a>
</div>
</div>
</body>
</html>
Output:
Example 4: The following code demonstrates the Semantic-UI List Link Content.
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI List Content </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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:
Example 5: The following code demonstrates the Semantic-UI List Header Content.
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI List Content </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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:
Example 6: The following code demonstrates the Semantic-UI List Description Content.
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI List Content </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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:
Reference: https://semantic-ui.com/elements/list.html