Open In App

Semantic-UI Card Metadata 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, meta, and description. In this article, we will learn about the meta block of the Semantic UI card.

Semantic UI card meta block stores the metadata for the card. To add metadata to the Card in semantic UI, we use the meta class. In a single card, there can be multiple <div> with the class meta. This class increases the transparency of text thus making it less focal to the view.

Semantic-UI Card Meta Block Class:

  • meta: This class is used to add metadata to the card and contains the least important information in the card which should be present in the card but not should be the focal point of interest.

Syntax:

<div class="ui card">
   <div class="meta">
           ......
   </div>
</div>

Example 1: The following example demonstrates the meta class of the semantic UI card. We can observe differences between normal text and meta class text.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
  <link rel="stylesheet"
    href=
</head>
 
<body style="padding: 40px;">
  <center>
    <h1 style="color: green">GeeksforGeeks</h1>
    <strong>Semantic UI card meta block</strong>
  </center><br>
 
  <div class="ui card">
    <div class="content">
       This is normal content text.
      <div class="meta">This is text with meta class.</div>
      <h1> Normal H1 heading.</h1>
      <h1 class="meta">Meta H1 heading</h1>
    </div>
  </div>
</body>
 
</html>


Output:

Output

Example 2: The following example demonstrates the meta block of the semantic UI card. We can observe different sections of the card with the meta class.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet"
        href=
</head>
 
<body style="padding: 40px;">
  <center>
    <h1 style="color: green">GeeksforGeeks</h1>
    <strong>Semantic UI card meta block</strong>
  </center><br>
 
  <div class="ui card">
    <div class="content">
      <div class="header" style="color: green;">Header</div>
      <div class="meta" style="color: green;">Meta</div>
    </div>
 
    <div class="image">
       <img src=
    </div>
 
    <div class="content">
      <h4 class="meta">Meta</h4>
      <div class="ui small feed">
        <div class="content">
           <div class="summary">
              This is implementation of summary class.
           </div>
 
           <div class="meta">
              This is implementation of meta class.
           </div>
        </div>
      </div>
    </div>
 </div>
</body>
   
</html>


Output:

Output

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



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