Semantic-UI Item Content
Last Updated :
13 Jun, 2022
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic UI Item Content offers us 8 types of content that can be used as an item in Semantic UI like Image, Content, Header, Metadata, Link, Description, Extra Content, and Rating. For each type of content, we have different articles.
Semantic UI Item Content:
- Image: This is used to add the image content in the Item.
- Content: This is used to add the content in the Item.
- Header: This is used to add the header content in the Item.
- Metadata: This is used to add the metadata content in the Item.
- Link: This is used to add the link content in the Item.
- Description: This is used to add the description content in the Item.
- Extra Content: This is used to add the extra content in the Item.
- Rating: This is used to add the rating content in the Item.
Syntax:
<div class="ui item-variations-class item-type-class">
<div class="item">
<div class=" item-content-class">
..
</div>
</div>
</div>
Below examples illustrate the Semantic UI Item Content:
Example 1: In this example we will use 4 content as Image, header, Content and Metadata content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic-UI Item Content</strong>
</center>
<br><br>
<div class="ui divided items container">
<div class="item">
<div class="image" title="Image">
<img src=
</div>
<div class="content"
title="Header, Content">
<a class="ui header green">
Geeksforgeeks
</a>
</div>
<div class="meta" title="Metadata">
<span class="estd">Estd: 2009</span>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI Item Content
Example 2: In this example we cover other content as well.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic-UI Item Content</strong>
</center>
<br><br>
<div class="ui divided items container">
<div class="item">
<div class="image" title="Image">
<img src=
</div>
<div class="content"
title="Header, Content & Link">
<i class="heart icon" title="Rating"></i>
<a class="ui header green"
Geeksforgeeks
</a><br><br>
<div class="description" title="Description">
<p>
This is where GeeksforGeeks comes into picture
- A computer science portal for geeks, by geeks.
... GeeksforGeeks.
</p>
</div>
</div>
<div class="meta" title="Metadata">
<span class="estd">Estd: 2009</span>
</div>
</div>
<div class="description" title="Description">
<p>
Free Tutorials, Millions of Articles, Live, Online
and Classroom Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship opportunities
and Job Opportunities.
</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI Item Content
Reference: https://semantic-ui.com/views/item.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...