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 = "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" > w3wiki </ h2 > < h3 > Semantic-UI List Content - Item </ h3 > < div class = "ui list" > < div class = "item" > w3wiki1 </ div > < div class = "item" > w3wiki2 </ div > < div class = "item" > w3wiki3 </ div > < div class = "item" > w3wiki4 </ div > < div class = "item" > w3wiki5 </ div > < div class = "item" > w3wiki6 </ div > < div class = "item" > w3wiki7 </ div > </ div > </ div > </ body > </ html > |
Output:
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 = "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" > w3wiki </ 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" > w3wiki: </ 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.
HTML
<!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" > w3wiki </ h2 > < h3 > Semantic-UI List Content - Image </ h3 > < div class = "ui list" > < a class = "item" > < img class = "ui avatar image" src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" > < div class = "content" > < div class = "header" > w3wiki: </ div > < div class = "description" > A Computer Science portal </ div > </ div > </ a > < a class = "item" > < img class = "ui avatar image" src = "https://media.w3wiki.net/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.
HTML
<!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" > w3wiki </ h2 > < h3 > Semantic-UI List Content - Link </ h3 > < div class = "ui link list" > < div class = "active item" > w3wiki </ 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.
HTML
<!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" > w3wiki </ h2 > < h3 > Semantic-UI List Content - Header </ h3 > < div class = "ui list" > < div class = "item" > < a class = "header" >w3wiki</ a > A Computer Science portal for Beginner. </ div > < div class = "item" > < a class = "header" >GFG</ a > Portal for Beginner. </ div > < div class = "item" > < a class = "header" >About GFG</ a > A Computer Science portal for Beginner. </ div > </ div > </ div > </ body > </ html > |
Output:
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 = "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" > w3wiki </ h2 > < h3 > Semantic-UI List Content - Description </ h3 > < div class = "ui list" > < div class = "item" > < div class = "content" > < a class = "header" > w3wiki </ a > < div class = "description" > A Computer Science portal for Beginner. </ div > </ div > </ div > < div class = "item" > < div class = "content" > < a class = "header" > GFG </ a > < div class = "description" > Portal for Beginner. </ 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