Open In App

Semantic-UI Card Link Variation

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.

The cards in Semantic UI are in general used to display web content just like the playing cards. Semantic UI provides us cards in many variations and with different contents included in the card. In this article, we are going to learn about Semantic UI Card Link variation and know the implementation along with the code examples and output.

This card in Semantic UI is designed in such a way that the entire contents present in the card are linked to another website i.e once you click on the contents of the card or any part of the card, you will be redirected to another page which you link it to. The contents present in Semantic UI Card Link Variation are as follows.

Semantic UI Card Link Variation Content Class:

  • link: It enables a raised card that moves when hovered.

Note: If we wish to create a card that when clicked should be redirected to another page, enclose the entire card with an HTML <a> tag so that it directs to the linked page.

Syntax :

<a class="ui card" href="....">
  <div class="content">
   ....
  </div>
</a>

Example 1: We can include the heading in the header class, description in description class, and additional information in the extra content class as shown in the following example. We can observe that we will be redirected as soon as we click the card.

HTML




<html>
<head>
    <title>Semantic-UI Card Link Variation</title>
    <link href=
          rel="stylesheet" />
     <script src=
             integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
             crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body>
     <center>   
           <h1 class="header ui green">GeeksforGeeks</h1>   
           <strong>Semantic UI Card Link Variation</strong>  
        <div class="ui raised link card"
         <a class="ui card" href="https://www.geeksforgeeks.org/">
           <div class="content">   
              <div class="header">GeeksforGeeks</div>   
              <div class="meta">   
                 <span class="category">
                   Website for interview preparation
                 </span>   
              </div>
              <div class="description">   
                  <p>   
                    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.
                  </p>
             </div>
          </div>
          <div class="extra content">   
              <div class="right floated author">   
                 <img class="ui avatar image" 
                      src=
               GeeksforGeeks
              </div>
          </div>
        </a>
       </div>       
    </center>
</body>
</html>


Output:

Semantic-UI Card Link Variation

Semantic-UI Card Link Variation

Example 2: In this example, we can observe that we will not be redirected but we can observe movement in the card when hovered.

HTML




<html>
<head>
    <title>Semantic-UI Card Link Variation</title>
    <link href=
          rel="stylesheet" />
     <script src=
             integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
             crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body>
     <center>   
         <h1 class="header ui green">GeeksforGeeks</h1>   
         <strong>Semantic UI Card Link Variation</strong>  
        <div class="ui link card"
           <div class="content">   
              <div class="header">GeeksforGeeks</div>   
              <div class="meta">   
                 <span class="category">
                    Website for interview preperation
                 </span>   
              </div>
              <div class="description">   
              <p>   
                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.
              </p>
     
             </div>
          </div>
          <div class="extra content">   
              <div class="right floated author">   
                 <img class="ui avatar image"
                      src=
                GeeksforGeeks
              </div>
          </div>   
        </div>    
    </center>
</body>
</html>


Output :

Semantic-UI Card Link Variation

Semantic-UI Card Link Variation

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



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