Open In App

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

The Semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes. Semantic UI cards have multiple sections such as content, extra content, and description. 

In this article, we will learn about the extra content block of the Semantic UI card. Semantic UI card extra content block is used to contain extra content meant to be formatted separately from the main content. To add extra content to the card in Semantic UI, we use the extra and content classes. In a single card, there can be multiple <div> with the classes extra and content.

Semantic UI Card Extra Content Block Class:

  • extra content: This class is used to convert a normal content block to the extra content block that is formatted separately from the main content.

Syntax:

<div class="ui card">
       <div class="extra content">
        ...
       </div>
</div>

Example 1: The following example demonstrates the basic card with an extra content section using Semantic UI.

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 href=
         rel="stylesheet" />
</head>
<body style="padding:20px;">
    <center>
    <h1 class="ui green header">GeeksforGeeks</h1>
    <strong>Semantic UI card extra content block</strong>
    </center><br>
    <div class="ui card">
        <div class="content">
            <h1 class="ui header green">GeeksforGeeks</h1>
            <div class="description">
            This is a basic card made using Semantic UI.
            </div>
        </div>
        <div class="extra content">
            Extra content block
        </div>
    </div>
</body>
</html>


Output:

Output

Example 2: The following example demonstrates the basic card with multiple extra content sections using Semantic UI.

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 href=
        rel="stylesheet" />
</head>
<body style="padding:20px;">
    <center>
    <h1 class="ui header green">GeeksforGeeks</h1>
    <strong>Semantic UI card extra content block</strong>
    </center><br>
    <div class="ui card">
        <div class="extra content">
            Extra content block 1
        </div>
        <div class="content">
            <h1 class="ui header green">GeeksforGeeks</h1>
            <div class="description">
            This is a basic card made using Semantic UI.
            </div>
        </div>
        <div class="extra content">
            <i class="check icon"></i>
            Extra content block 2
        </div>
        <div class="extra content">
            <i class="like icon"></i>
            Extra content block 3
        </div>
    </div>
</body>
</html>


Output:

Output

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



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