Semantic-UI List Image Content
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website looks more amazing. It uses a class to add CSS to the elements.
Semantic UI List Image Content is used to add an image to the list item.
Semantic UI List Image Content:
- image: This class is used to add an image to the list item.
Syntax:
<div class="ui list">
<div class="item">
<img class="ui image" src="">
....
</div>
</div>
Example 1: In this example, we are creating list items with the avatar image content.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Image Content </title> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Image Content</h3> <div class="ui list"> <div class="item"> <img class="ui avatar image" src= <div class="content"> <a class="header">GeeksforGeeks</a> <div class="description"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> </div> </div> <div class="item"> <img class="ui avatar image" src= <div class="content"> <a class="header">Data Structure</a> <div class="description"> A data structure is a particular way of organizing data in a computer so that it can be used effectively. </div> </div> </div> <div class="item"> <img class="ui avatar image" src= <div class="content"> <a class="header">Algorithm</a> <div class="description"> The word Algorithm means “a process or set of rules to be followed in calculations or other problem-solving operations”. </div> </div> </div> <div class="item"> <img class="ui avatar image" src= <div class="content"> <a class="header">Web Development</a> <div class="description"> Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, ... </div> </div> </div> </div> </div> </body> </html> |
Output:
Example 2: In this example, we are creating a list of items with the image content.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Image Content </title> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Image Content</h3> <div class="ui list"> <div class="item"> <img class="ui image" src= width="50px" height="50px"> <div class="content"> <a class="header">GeeksforGeeks</a> <div class="description"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> </div> </div> <div class="item"> <img class="ui image" src= width="50px" height="50px"> <div class="content"> <a class="header">Data Structure</a> <div class="description"> A data structure is a particular way of organizing data in a computer so that it can be used effectively. </div> </div> </div> <div class="item"> <img class="ui image" src= width="50px" height="50px"> <div class="content"> <a class="header">Algorithm</a> <div class="description"> The word Algorithm means “a process or set of rules to be followed in calculations or other problem-solving operations”. </div> </div> </div> <div class="item"> <img class="ui image" src= width="50px" height="50px"> <div class="content"> <a class="header">Web Development</a> <div class="description"> Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, ... </div> </div> </div> </div> </div> </body> </html> |
Output:
Reference link: https://semantic-ui.com/elements/list.html#image
Please Login to comment...