Semantic-UI Feed Content Date

Last Updated : 06 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery for great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic-UI Feed is used to display updates chronological-wise. A user’s feed or updates to his social media or blog is presented in a standard sequenced way. Contents, dates, like buttons and links, can be placed including images in the feed.

Semantic-UI Feed Date Content displays the date in the content of the feed. The date should be placed in a proper style and alignment to see the update clearly

Semantic-UI Feed Date Content classes:

date: This class is used to define or mention the date.

Syntax:

<div class="content">
    <div class="date"> ... </div>
    ...
</div>

Below example illustrate the Semantic-UI Feed Content Date:

Example: In the following example, we have three events with dates in the content inside the feed.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
             rel="stylesheet"/> 
    <style> 
        div { 
            margin-left: 15px; 
        } 
    </style> 
</head> 
<body> 
    <center> 
    <h1> 
        GeeksforGeeks 
    </h1> 
    <strong> 
        Semantic-UI Feed Content Date  
    </strong> 
    </center> 
    <div class="ui feed"> 
            <div class="content"> 
                <div class="date"> 
                    3 days ago 
                </div> 
                <div class="summary"> 
                    Your post was liked 
                </div> 
            </div> 
        </div> 
        <div class="event"> 
            <div class="content"> 
                <div class="summary"> 
                    Wow! amazing 
                    <div class="date"> 
                        2 Days Ago 
                    </div> 
                </div> 
                <div class="meta"> 
                    <a class="like"> 
                        <i class="like icon"> 
                        </i> 
                        8 Likes 
                    </a> 
                </div> 
            </div> 
        </div> 
        <div class="event"> 
            <div class="content"> 
                <div class="summary"> 
                    GeeksforGeeks posted a new post 
                    <div class="date"> 
                        7 Days Ago 
                    </div> 
                </div> 
                <div class="meta"> 
                    <a class="like"> 
                        <i class="like icon"> 
                        </i> 
                        5 Likes 
                    </a> 
                </div> 
            </div> 
        </div> 
</body> 
</html> 