Semantic-UI Item Metadata Content

Last Updated : 14 Feb, 2022

Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. it makes web pages to look amazing and responsive.

Semantic UI Item presents a large collection of similar types of data on a site. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Metadata Content is used to display metadata such as date, price, rating, likes and reviews count, etc. The child elements inside the metadata are automatically spaced.

Semantic UI Item Metadata Content Classes:

meta: On adding this class to a container inside the content container, the child elements are displayed as metadata.

Syntax: Add the class meta to a container inside the content container as follows:

<div class="items">
    <div class="item">
        <div class="content">
            ...
            <div class="meta"> ... </div>
            ...
        </div>
    </div>
    ...
</div>

Example: In the following example, we have added different metadata to the meta class for displaying them.

HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  </head>

  <body>
    <div class="ui container">
      <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Item Metadata Content</strong>
      </center>
    </div>
    <div class="ui items">
      <div class="item">
        <div class="ui small image">
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          />
        </div>
        <div class="content">
          <div class="header">Data Structures and Algorithms</div>
          <div class="meta">
            <span class="likes">30 Likes</span>
            <span class="views">10000 Views</span>
          </div>
          <div class="description">
            <p>Lots of high quality tutorials in GeeksforGeeks</p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="ui small image">
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
          />
        </div>
        <div class="content">
          <div class="header">Machine Learning</div>
          <div class="meta">
            <span class="likes">123 Likes</span>
            <span class="views">2300 Views</span>
          </div>
          <div class="description">
            <p>Get started with Machine Learning with GeeksforGeeks</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Output

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

Semantic-UI Comment Metadata Content

RajeevSarkar

Improve

Article Tags :

Semantic-UI Item Metadata Content

Similar Reads

Thank You!

What kind of Experience do you want to share?