Semantic-UI List Content Variations
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 with different variations of the list, like Horizontal, Inverted, Selection, Animated, Relaxed, Divided, Celled, and Size variants. Here we will learn about Semantic-UI List Content Variations that are used to display the alignment and float of the content.
Semantic-UI List Content Variations:
- Vertically Aligned: It is used to set the vertical alignment of the list element.
- Floated: It is used to set the float of the list element.
Semantic-UI List Vertically Aligned Content Variations Used Classes:
- top aligned: This class is used to display the top alignment of the list element.
- middle aligned: This class is used to display the middle alignment of the list element.
- bottom aligned: This class is used to display the bottom alignment of the list element.
Semantic-UI List Floated Content Variations Used Classes:
- left floated: This class is used to set the left float of the list element.
- right floated: This class is used to set the right float of the list element.
Syntax:
// Syntax for Vertically Aligned Content Variation
<div class="top aligned content">
Top Aligned
</div>
// Syntax for Floated Content Variation
div class="right floated content">
Right floated content
</div>Example 1: In this example, we will describe the use of List Vertically Aligned Content Variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI List Vertically Aligned Content Variation </title> <link rel="stylesheet" href=</head><body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Vertically Aligned Content Variation</h3> <div class="ui list"> <div class="item"> <img class="ui avatar image" src= <div class="top aligned content"> GeeksforGeeks </div> </div> <div class="item"> <img class="ui avatar image" src= <div class="middle aligned content"> Data Structure </div> </div> <div class="item"> <img class="ui avatar image" src= <div class="bottom aligned content"> Algorithm </div> </div> </div> </div></body></html> |
Output:
Example 2: In this example, we will describe the use of List Floated Content Variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI List Floated Content Variation </title> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Floated Content Variation</h3> </div> <div class="ui container list"> <div class="item"> <img class="ui avatar image" src= <a class="right floated content"> GeeksforGeeks </a> </div> <div class="item"> <img class="ui avatar image" src= <a class="right floated content"> Data Structure </a> </div> <div class="item"> <img class="ui avatar image" src= <a class="right floated content"> Algorithm </a> </div> </div></body></html> |
Output:
Reference: https://semantic-ui.com/elements/list.html
Please Login to comment...