Semantic-UI List Content
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
Please Login to comment...