The Semantic UI List is a collection of semantic and responsive HTML elements that allow you to display content in a structured manner. In this tutorial, we will explore the syntax, example, output, explanation, use, and important points of Semantic UI Lists.
A Semantic UI List can be defined using the following syntax:
<div class="ui list">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
Let's consider an example of creating a Semantic UI List for a product catalog. The following code creates a list of products with their name and price.
<div class="ui very relaxed list">
<div class="item">
<div class="content">
<a class="header">Product A</a>
<div class="description">$99.99</div>
</div>
</div>
<div class="item">
<div class="content">
<a class="header">Product B</a>
<div class="description">$49.99</div>
</div>
</div>
<div class="item">
<div class="content">
<a class="header">Product C</a>
<div class="description">$149.99</div>
</div>
</div>
</div>
A list can mark items with a bullet.
<div class="ui bulleted list">
<div class="item">Gaining Access</div>
<div class="item">Inviting Friends</div>
<div class="item">
<div>Benefits</div>
<div class="list">
<a class="item" href="#">Link to somewhere</a>
<div class="item">Rebates</div>
<div class="item">Discounts</div>
</div>
</div>
<div class="item">Warranty</div>
</div>
A list can be ordered numerically.
<div class="ui ordered list">
<a class="item">Getting Started</a>
<a class="item">Introduction</a>
<div class="item">
<a>Languages</a>
<div class="list">
<a class="item">HTML</a>
<a class="item">Javascript</a>
<a class="item">CSS</a>
</div>
</div>
<a class="item">Review</a>
</div>
A list item can contain an icon and image
<div class="ui list">
<a class="item">
<i class="help icon"></i>
<div class="content">
<div class="header">Floated Icon</div>
<div class="description">This text will always have a left margin to make sure it sits alongside your icon</div>
</div>
</a>
<div class="item">
<img class="ui avatar image" src="https://static.additionalsheet.com/images//others/alisa.jpg">
<div class="content">
<a class="header">Rachel</a>
<div class="description">Last seen watching <a><b>Arrested Development</b></a> just now.</div>
</div>
</div>
</div>
A list can be formatted to have items appear horizontally.
<div class="ui horizontal list">
<div class="item">
<img class="ui avatar image" src="https://static.additionalsheet.com/images//others/josh.jpg">
<div class="content">
<div class="header">Steve Jobes</div>
50 Points
</div>
</div>
<div class="item">
<img class="ui avatar image" src="https://static.additionalsheet.com/images//others/alisa.jpg">
<div class="content">
<div class="header">Stevie Feliciano</div>
44 Points
</div>
</div>
<div class="item">
<img class="ui avatar image" src="https://static.additionalsheet.com/images//others/lucy.jpg">
<div class="content">
<div class="header">Jenny Hess</div>
11 Points
</div>
</div>
</div>
A list can divide its items into cells
<div class="ui celled list">
<div class="item">
<img class="ui avatar image" src="https://static.additionalsheet.com/images//others/josh.jpg">
<div class="content">
<div class="header">Snickerdoodle</div>
An excellent companion
</div>
</div>
<div class="item">
<img class="ui avatar image" src="https://static.additionalsheet.com/images//others/lucy.jpg">
<div class="content">
<div class="header">Poodle</div>
A poodle, its pretty basic
</div>
</div>
</div>
<!-- horizontal -->
<div class="ui celled horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div>
A list can vary in size.
<div class="ui mini horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div><br />
<div class="ui tiny horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div><br />
<div class="ui small horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div><br />
<div class="ui large horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div><br />
<div class="ui big horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div><br />
<div class="ui huge horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div><br />
<div class="ui massive horizontal list">
<div class="item">About Us</div>
<div class="item">Contact</div>
<div class="item">Support</div>
</div><br />
The Semantic UI List is a collection of semantic and responsive HTML elements that allow you to display content in a structured manner. It includes various CSS classes that can be used to customize and style the elements according to your needs.
The above example creates a list of products with each product having its name and price displayed in separate HTML elements.
The Semantic UI List can be used to display various types of content including product catalogs, contact lists, event schedules, and more. It provides a structured and responsive layout that is easy to read and access.
The Semantic UI List is a collection of semantic and responsive HTML elements.
In this tutorial, we explored the syntax, example, output, explanation, use, and important points of Semantic UI Lists. The Semantic UI List is a collection of semantic and responsive HTML elements that allow you to display content in a structured and responsive manner. It provides various CSS classes that can be used to customize and style the elements according to your needs.