Semantic-UI List Header 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 provides us different variations of the list, like Horizontal, Inverted, Selection, Animated, Relaxed, Divided, Celled, and Size variants. Here we will learn about Semantic-UI List Header Content is used to add the header section content to the list items.
Semantic-UI List Header Content Class:
- header: This class is used to add header content to the list item.
Syntax:
<div class="ui list">
<div class="item">
<div class="header"> Header Content... </div>
</div>
...
</div>Example 1: In this example, we are creating list items with the header content.
HTML
<!DOCTYPE html><html> <head> <title> Semantic-UI List Header Content </title> <link rel="stylesheet" href=</head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Header Content</h3> <div class="ui list"> <div class="item"> <a class="header">GeeksforGeeks</a> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> <div class="item"> <a class="header">Data Structure</a> A data structure is a particular way of organizing data in a computer so that it can be used effectively. </div> <div class="item"> <a class="header">Algorithm</a> The word Algorithm means “a process or set of rules to be followed in calculations or other problem-solving operations”. </div> <div class="item"> <a class="header">Web Development</a> Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, ... </div> </div> </div></body> </html> |
Output:
Semantic-UI List Header Content
Example 2: In this example, we are creating list items with the header content.
HTML
<!DOCTYPE html><html> <head> <title> Semantic-UI List Header Content </title> <link rel="stylesheet" href=</head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Header 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:
Semantic-UI List Header Content
Reference: https://semantic-ui.com/elements/list.html#header
Please Login to comment...