Open In App

Semantic-UI Card 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.

Using Semantic UI, we can even style cards where content is displayed just as in playing cards. Semantic UI has provided an amazing feature in which we can display the cards with different contents and variations. In this article, we will get to know card link content i.e a card in which the content displayed will act as links.

Semantic UI Card Link Content provides the offers to make the header, content, and image clickable as soon as someone clicks on them, the page will immediately redirect to the respective links.

Semantic UI Card Link Content Class: There is no predefined class for this you just need to add the content in the anchor tag with the valid href attribute.

Syntax:

<div class="content">
   <a class="image" href="">
     ...
   </a>
   <a class="header" href="">
     ...
   </a>
   <div class="meta">
     <a>...</a>
   </div>
 </div>

Example: The following code demonstrates the use of card link content using the above classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
      
    <link rel="stylesheet"
          href=
   <style>
       body {
         margin-left: 10px;
         margin-right: 10px;
       }
    </style>
</head>
  
<body>
    <center>
       <h1 class="header ui green">GeeksforGeeks</h1>
       <strong>Semantic UI Card link content</strong>
    </center><br>
    <div class="ui card">
        <a class="image" 
           href="https://www.geeksforgeeks.org/">
            <img src=
        </a>
        <div class="content">
            <a class="header" 
               href="https://www.geeksforgeeks.org/">
                GFG is the best website ever.
            </a>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Card Link Content

Semantic-UI Card Link Content

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



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