Semantic-UI Card Link Variation
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.
<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.
Example 2: In this example, we can observe that we will not be redirected but we can observe movement in the card when hovered.
Please Login to comment...