Semantic-UI List Link 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 Link Content is used to add links to the list items.
Semantic UI List Link Content classes:
- link list: This class is used to give a format to list as navigation links.
Syntax:
<div class="ui link list">
<a class="item"> ....</a>
...
</div>
Example 1: In this example, we are creating a list of items with the item content.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Link Content </title> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Link Content</h3> <div class="ui link list"> <div class="active item">GeeksforGeeks</div> <a class="item">Data Structure</a> <a class="item">Algorithm</a> <a class="item">Interview Preparation</a> <a class="item">Competitive Programming</a> <a class="item">Machine Learning</a> <a class="item">Web Development</a> </div> </div> </body> </html> |
Output:
Example 2: In this example, we are creating horizontal list items with the item content.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI List Link Content</title> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <strong>Semantic-UI List Link Content</strong> </br></br> <div class="ui horizontal link list"> <div class="active item">GeeksforGeeks</div> <a class="item">Data Structure</a> <a class="item">Algorithm</a> <a class="item">Interview Preparation</a> <a class="item">Competitive Programming</a> <a class="item">Machine Learning</a> <a class="item">Web Development</a> </div> </div> </body> </html> |
Output:
Reference link: https://semantic-ui.com/elements/list.html#link
Please Login to comment...