Semantic-UI Item Link Variation
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < center > < h1 class = "ui header green" > w3wiki </ 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 = "https://media.w3wiki.net/wp-content/uploads/20220211141617/Screenshot20220211141558-200x189.png" /> </ div > < div class = "content" > < a class = "header" >Sandeep Jain</ a > < div class = "meta" > < span >Founder of w3wiki</ 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 = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png" /> </ div > < div class = "bottom aligned content" > < div class = "header" >w3wiki</ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example all the items will be link able.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < center > < h1 class = "ui header green" >w3wiki</ 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 = "https://media.w3wiki.net/wp-content/uploads/20220211141617/Screenshot20220211141558-200x189.png" /> </ div > < div class = "content" > < a class = "header" >Sandeep Jain</ a > < div class = "meta" > < span >Founder of w3wiki</ 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 = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png" /> </ div > < div class = "bottom aligned content" > < div class = "header" >w3wiki</ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/views/item.html#link-item