Semantic-UI Item Link Variation
Last Updated :
24 Feb, 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.
A Semantic UI Item is used to display large amounts of content on a page. The Semantic UI Item Variation offers us 6 types of variations that can be used with this item for changing the type of display of this item. Here in this article we will learn about the Semantic UI Item Link variant.
Semantic UI Item Link variant is used to make a item link able. So the user can visit the main content which is linked to that entire items.
Semantic UI Item Variations Link variant class:
- link: This class is used to make the item link able.
Syntax:
<div class="ui link items">
......
</div>
Below example illustrate the Semantic UI Item Variations Link variant:
Example 1: In this example we will create two items list one will be link able other one will not.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"/>
</head>
<body>
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Item Variations Link Variant
</strong>
</center>
<br/><br/>
<strong>
Item Link Variant:
</strong>
<br/>
<div class="ui link items">
<div class="item">
<div class="image">
<img src=
</div>
<div class="content">
<a class="header">Sandeep Jain</a>
<div class="meta">
<span>Founder of Geeksforgeeks</span>
</div>
<div class="extra">
<p>
Expert Advice series, we’re
constantly trying to provide
you with several enriching advice
and mentorship every month to resolve
all your career-related concerns and
make your journey smoother.
</p>
<div class="ui right floated green button">
Connect
</div>
</div>
</div>
</div>
<br/>
<strong>
Item non Link Variant:
</strong>
<br/>
<div class="ui items">
<div class="item">
<div class="ui small image">
<img src=
</div>
<div class="bottom aligned content">
<div class="header">Geeksforgeeks</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI Item Variations Link variant
Example 2: In this example all the items will be link able.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"/>
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic-UI Item Variations Link Variant</strong>
</center>
<br/><br/>
<strong>
Item Link Variant:
</strong>
<br/>
<div class="ui link items">
<div class="item">
<div class="image">
<img src=
</div>
<div class="content">
<a class="header">Sandeep Jain</a>
<div class="meta">
<span>Founder of Geeksforgeeks</span>
</div>
<div class="extra">
<p>
Expert Advice series, we’re constantly
trying to provide you with
several enriching advice and mentorship
every month to resolve all
your career-related concerns and make
your journey smoother.
</p>
<div class="ui right floated green button">
Connect
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui small image">
<img src=
</div>
<div class="bottom aligned content">
<div class="header">Geeksforgeeks</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI Item Variations Link variant
Reference: https://semantic-ui.com/views/item.html#link-item
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...