What is Semantic-UI Item Metadata Content?

In this article, we will learn Semantic-UI Item Metadata Content,This free Semantic-UI tutorial for complete beginners will help you learn Semantic-UI from scratch.

Semantic-UI Item Metadata Content - ❤️Semantic-UI Tutorials In 2024

Q: How to use Semantic-UI Item Metadata Content in Semantic-UI?

Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components

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">w3wiki</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.w3wiki.net/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 w3wiki</p> 
          </div> 
        </div> 
      </div> 
      <div class="item"> 
        <div class="ui small image"> 
          <img
            src="https://media.w3wiki.net/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 w3wiki</p> 
          </div> 
        </div> 
      </div> 
    </div> 
  </body> 
</html> 

Output

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