Open In App

Semantic-UI Item Link Content

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI Item helps us to present large collections of site content for display. An item can contain any content like images, text, header, metadata, link, description, and ratings. In this article, we will learn about the Semantic UI Item Content Link. A link can be applicable to images, headers, or inside content.

Semantic UI Item Content Link Class: There is no pre-defined class to make the item content linkable. We just need to put that content inside of the anchor tag with a valid href attribute.

Syntax:

<div class="ui items">
    <div class="item">
        <a class="..." href="">
        ...
        </a>
    </div>
</div>

The below example illustrates the Semantic UI Item Content Link:

Example: In this example, we will use the image, and heading content as link content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Item Content Link</strong>
        <br><br>
    </center>
  
    <div class="ui items">
        <div class="item">
            <a class="ui small image" 
                href="https://www.geeksforgeeks.org/">
                <img src=
            </a>
  
            <div class="content">
                <a class="header" 
                    href="https://www.geeksforgeeks.org/">
                    GeeksforGeeks
                </a>
                <div class="description">
                    <p>
                        Free Tutorials, Millions of Articles,
                        Live, Online and Classroom Courses ,
                        Frequent Coding ,Webinars by Industry
                        Experts, Internship opportunities and
                        Job Opportunities.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic UI Item Content Link

Semantic UI Item Content Link

Reference: https://semantic-ui.com/views/item.html#link



Last Updated : 17 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads