Open In App

Semantic-UI Card Floated Content 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 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, approval, and description. In this article, we will learn about the Approval block of the Semantic UI card. Semantic-UI Card Floated Content Variation is used to display the card content on the left or right side using float. To make the content into the right side, we will use the right floated class, and to make the content left side, we will use the left floated class. By default, the content is floated to the left side.

Semantic-UI Card Floated Content Variation Classes:

  • left floated: This class is used to float the content into the left side.
  • right floated: This class is used to float the content into the right side.

Syntax:

<div class="ui card">
    ...
    <div class="right floated">
        ...
    </div>
    ...
</div>

Example 1: In this example, we will describe the Semantic-UI Card Floated Content Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Card Floated Content Variation
    </title>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Card Floated Content Variation</h3>
  
        <div class="ui card">
            <div class="content">
                <div class="header">GeeksforGeeks</div>
                <hr>
                <div class="meta">
                    <span class="time">
                        Published: 1 March 2022
                    </span>
                </div>
                <hr>
  
                <div class="description">
                    <p class="ui justified container">
                        A Computer Science portal for geeks. 
                        It contains well written, well thought 
                        and well explained computer science 
                        and programming articles, ...
                    </p>
  
                </div>
            </div>
            <div class="extra content">
                <div class="right floated author">
                    <div class="description">
                        Author: <i>Sandeep Jain</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Card Floated Content Variation

Semantic-UI Card Floated Content Variation

Example 2: In this example, we will describe the Semantic-UI Card Floated Content Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Card Floated Content Variation
    </title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Card Floated Content Variation</h3>
  
        <div class="ui card">
            <div class="image">
                <img src=
            </div>
  
            <div class="extra content">
                <div class="left floated">
                    <i class="comments icon"></i> 101
                </div>
  
                <div class="right floated author">
                    Author: <i>Sandeep Jain</i>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Card Floated Content Variation

Semantic-UI Card Floated Content Variation

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



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