Semantic-UI List Divided Variation
Last Updated :
13 Mar, 2022
Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
Semantic-UI list provides us with different variations of the list, like Horizontal, Inverted, Selection, Animated, Relaxed, Divided, Celled, and Size variants.
Semantic-UI List Divided Variation is used to add the division between the list items’ content. To add the division inside list elements, we will use divided class.
Semantic-UI List Divided Variation Used Class:
- divided: This class is used to add division between the list items content.
Syntax:
<div class="ui divided list">
<div class="item">
...
</div>
...
</div>
Example 1: This example describes the uses of Semantic-UI List Divided Variation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI List Divided Variation
</title>
<link rel="stylesheet"
href=
</head>
<body>
<div class="ui container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI List Divided Variation</h3>
<div class="ui divided 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 articles...
</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<a class="header">HTML</a>
<div class="description">
HTML stands for HyperText Markup
Language. It is used to design web
pages using a markup language.
</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<a class="header">CSS</a>
<div class="description">
CSS (Cascading Style Sheets) is a
stylesheet language used to design
the webpage to make it attractive.
</div>
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="content">
<a class="header">JavaScript</a>
<div class="description">
JavaScript is the world most popular
lightweight, interpreted compiled
programming language.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI List Divided Variation
Example 2: This example describes the uses of Semantic-UI List Divided Variation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI List Divided Variation
</title>
<link rel="stylesheet"
href=
</head>
<body>
<div class="ui container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI List Divided Variation</h3>
<div class="ui middle aligned divided list">
<div class="item">
<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 articles...
</div>
</div>
</div>
<div class="item">
<div class="content">
<a class="header">HTML</a>
<div class="description">
HTML stands for HyperText Markup
Language. It is used to design web
pages using a markup language.
</div>
</div>
</div>
<div class="item">
<div class="content">
<a class="header">CSS</a>
<div class="description">
CSS (Cascading Style Sheets) is a
stylesheet language used to design
the webpage to make it attractive.
</div>
</div>
</div>
<div class="item">
<div class="content">
<a class="header">JavaScript</a>
<div class="description">
JavaScript is the world most popular
lightweight, interpreted compiled
programming language.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI List Divided Variation
Reference: https://semantic-ui.com/elements/list.html#divided
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...