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
Last Updated :
22 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...