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.
We can display the web content in the form of cards just like how content is displayed on playing cards in Semantic UI in a very simple way when compared to writing the CSS codes. We can display the content of the cards in many variations like centered card, fluid card, raised card, etc, and include different contents like buttons, links, etc. In this article, we will learn about one of the card variations which is Semantic-UI Card Raised Variation along with its implementation using the example code.
In Semantic-UI Card Raised Variation, the variation leads to the raising of the card. It is formatted in such a way that it raises above the page. We can use the following classes to achieve that.
Semantic-UI Card Raised Variation Content class:
- raised: The entire class should be enclosed with this class to enable the raising of the card above page.
Syntax:
<div class="ui raised card">
<div class="content">
......
</div>
</div>Example 1: We can include the heading in .header class, description in .description class, and additional information in .extracontent class as shown in the following example.
<!DOCTYPE html><html>
<head>
<title>Semantic-UI Card Raised 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 Raised Variation</strong>
<div class="ui raised card">
<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>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Card Raised Variation
Example 2: We can use a class .link to link the card to another page and also enable a raised link card as shown in the following example. This is similar to the previous example but when we hover the card, we can observe movement.
<!DOCTYPE html><html>
<head>
<title>Semantic-UI Card Raised 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 Raised Variation</strong>
<div class="ui raised card">
<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>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Card Raised Variation
Reference: https://semantic-ui.com/views/card.html#raised-card