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 look more amazing. It uses a class to add CSS to the elements.
A list is an excellent way to group a set of related items. It is an important part of a website. Semantic UI gives us a semantic UI-styled list. Let’s have a look at various list variations.
Semantic UI List Variations:
- Horizontal: Positions the list in a horizontal fashion.
- Inverted: Inverts the colors of the list.
- Selection: This allows the user to select items from the list.
- Animation: Animates a particular item in a list.
- Relaxed: Provides more padding among list items, making them more spaced out.
- Divided: Creates a division among list items.
- Celled: Divided the list items into individual cells.
- Size: Varies the size of the list.
Syntax:
<div class="ui Horizontal-Variation Inverted-Variation
Selection-Variation Animation-Variation Relaxed-Variation
Divided Variation Celled-Variation Size-Variation list">
<div class="item">
...
</div>
...
</div>Example 1: In the below example, we have created a horizontal list.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<div class="ui horizontal list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</body>
</html>
|
Output:
Horizontal List
Example 2: In the below example, we have created an inverted list.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<div class="ui inverted segment">
<div class="ui horizontal inverted list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Inverted List
Example 3: In the below example, we have created a selection list.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<div class="ui inverted segment">
<div class="ui inverted selection list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Selection List
Example 4: In the below example, we have created an animated list.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<div class="ui inverted segment">
<div class="ui inverted animated list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Animated List
Example 5: In the below example, we have created a relaxed list.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<div class="ui inverted segment">
<div class="ui inverted very relaxed list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Relaxed List
Example 6: In the below example, we have created a divided list.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<div class="ui inverted segment">
<div class="ui inverted very relaxed divided list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Divided List
Example 7: In the below example, we have created a celled list.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<div class="ui very relaxed celled list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</body>
</html>
|
Output:
Celled List
Example 8: In the below example, we have created lists of various sizes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI List Variations</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI List Variations</h4>
<hr />
<br />
<h5 class="ui header">Mini List</h5>
<div class="ui inverted segment">
<div class="ui inverted mini list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
<h5 class="ui header">Tiny List</h5>
<div class="ui inverted segment">
<div class="ui inverted tiny list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
<h5 class="ui header">Small List</h5>
<div class="ui inverted segment">
<div class="ui inverted small list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
<h5 class="ui header">Standard List</h5>
<div class="ui inverted segment">
<div class="ui inverted list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
<h5 class="ui header">Large List</h5>
<div class="ui inverted segment">
<div class="ui inverted large list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
<h5 class="ui header">Big List</h5>
<div class="ui inverted segment">
<div class="ui inverted big list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
<h5 class="ui header">Massive List</h5>
<div class="ui inverted segment">
<div class="ui inverted massive list">
<div class="item">
Machine Learning
</div>
<div class="item">
Blockchain
</div>
<div class="item">
Data Science
</div>
<div class="item">
Web Development
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
List of various sizes
Reference: https://semantic-ui.com/elements/list.html