Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
The Semantic UI List elements are used to display the group of related data under the same type. The Semantic-UI List Size Variation is used to add different sizes of the list elements.
Semantic-UI List Size Variation Used Classes:
- mini: This class is used to display the list of mini sizes.
- tiny: This class is used to display the list of tiny sizes.
- small: This class is used to display the list of small sizes.
- medium: This class is used to display the list of medium sizes.
- large: This class is used to display the list of large sizes.
- big: This class is used to display the list of big sizes.
- huge: This class is used to display the list of huge sizes.
- massive: This class is used to display the list of massive sizes.
Syntax:
<div class="ui Size-Variation-Used-Class list">
...
</div>Example 1: In this article, we will describe the Semantic-UI List Size Variation.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI List Size Variation
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI List Size Variation</h3>
<div class="ui mini horizontal list">
<div class="item">GeeksforGeeks</div>
<div class="item">Data Structure</div>
<div class="item">Algorithm</div>
</div>
<br>
<div class="ui tiny horizontal list">
<div class="item">GeeksforGeeks</div>
<div class="item">Data Structure</div>
<div class="item">Algorithm</div>
</div>
<br>
<div class="ui small horizontal list">
<div class="item">GeeksforGeeks</div>
<div class="item">Data Structure</div>
<div class="item">Algorithm</div>
</div>
<br>
<div class="ui large horizontal list">
<div class="item">GeeksforGeeks</div>
<div class="item">Data Structure</div>
<div class="item">Algorithm</div>
</div>
<br>
<div class="ui big horizontal list">
<div class="item">GeeksforGeeks</div>
<div class="item">Data Structure</div>
<div class="item">Algorithm</div>
</div>
<br>
<div class="ui huge horizontal list">
<div class="item">GeeksforGeeks</div>
<div class="item">Data Structure</div>
<div class="item">Algorithm</div>
</div>
<br>
<div class="ui massive horizontal list">
<div class="item">GeeksforGeeks</div>
<div class="item">Data Structure</div>
<div class="item">Algorithm</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI List Size Variation
Example 2: In this article, we will describe the Semantic-UI List Size Variation.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI List Size Variation
</title>
<link rel="stylesheet"
href=
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI List Size Variation</h3>
<div class="ui mini horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">GeeksforGeeks</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">HTML</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">CSS</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">JavaScript</div>
</div>
</div>
</div>
<br>
<div class="ui tiny horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">GeeksforGeeks</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">HTML</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">CSS</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">JavaScript</div>
</div>
</div>
</div>
<br>
<div class="ui small horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">GeeksforGeeks</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">HTML</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">CSS</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">JavaScript</div>
</div>
</div>
</div>
<br>
<div class="ui large horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">GeeksforGeeks</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">HTML</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">CSS</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">JavaScript</div>
</div>
</div>
</div>
<br>
<div class="ui big horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">GeeksforGeeks</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">HTML</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">CSS</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">JavaScript</div>
</div>
</div>
</div>
<br>
<div class="ui huge horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">GeeksforGeeks</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">HTML</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">CSS</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">JavaScript</div>
</div>
</div>
</div>
<br>
<div class="ui massive horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">GeeksforGeeks</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">HTML</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">CSS</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<div class="header">JavaScript</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI List Size Variation
Reference: https://semantic-ui.com/elements/list.html#size