Semantic-UI Card Buttons Content

Last Updated : 23 Feb, 2022

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.

Semantic UI card has a feature to display the web content in the form of a card just like how the content is displayed in the playing cards. The Button Content is used to add the button to the card that contains some kinds of actions that need to perform, based on certain conditions. For instance, for a wide range of use, semantic UI has many types of cards involving different content in the card, i.e, image, link, buttons, etc, and in many variations like fluid card, link card, and many more. In this article, we will look into card buttons content where buttons are involved in the card content.

Card Buttons Content: This is a card that contains buttons with the content. The basic layout of the card contains 3 basic parts i.e., the header, description & button.

Semantic UI card Button Content-Class:

content: It represents the card’s content for the header & description.

Syntax:

<div class="ui cards">
    <div class="card">
        <div class="content">
            <div class="header">
                 ..... 
             </div>
        </div>
    </div>
</div>

Example: This example describes the Semantic-UI Card Buttons Content.

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <title>Semantic-UI Card Buttons Content</title>
</head>
 
<body>
    <div class="ui cards">
        <div class="card">
            <div class="content">
                <div class="header ui green">
                    GeeksforGeeks
                </div>
                <div class="description">
                    As the placement season is back, 
                    GeeksforGeeks is here to help you 
                    crack the interview. We have selected
                    some most commonly asked and MUST DO
                    practice problems to crack Product-based
                    Company Interviews. 
                </div>
            </div>
            <div class="ui bottom attached button">
                Visit Website 
            </div>
        </div>
    </div>
</body>
</html>