|
|
---layout : 'default'css : 'feed'
title : 'Feed'description : 'A feed presents user activity chronologically'type : 'UI View'---
<%- @partial('header') %><div class="main container">
<div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">Content</a> <a class="item">Variations</a> </div> </div>
<h2 class="ui dividing header">Types</h2>
<div class="example"> <h4>Feed</h4> <p>A standard feed with some optional elements</p> <div class="ui piled feed segment"> <h2 class="ui header"> Recent Activity </h2> <div class="event"> <div class="label"> <img src="/images/demo/avatar2.jpg"> </div> <div class="content"> <div class="date"> Just moments ago </div> <div class="summary"> <a>Sally Poodle</a> added you as a friend </div> </div> </div> <div class="event"> <div class="label"> <i class="circular pencil icon"></i> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> You submitted a new post to the page </div> <div class="extra text"> I am a dog and I do not know how to make a post </div> </div> </div> <div class="event"> <div class="label"> <i class="circular photo icon"></i> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> <a>Sally Poodle</a> added <a>2 new photos</a> of you </div> <div class="extra images"> <img src="/images/demo/item1.jpg"> <img src="/images/demo/item2.jpg"> </div> </div> </div> </div> </div>
<h2 class="ui dividing header">Content</h2>
<div class="example"> <h4>Label</h4> <p>An event can contain a label</p> <div class="ignored ui info message">In semantic's implementation a label is formatted to contain an icon or an image</div> <div class="ui feed segment"> <div class="event"> <div class="label"> <img src="/images/demo/avatar.jpg"> </div> <div class="content"> <div class="summary"> <a>Sally Poodle</a> added you as a friend </div> </div> </div> <div class="event"> <div class="label"> <i class="circular pencil icon"></i> </div> <div class="content"> <div class="summary"> You submitted a new post to the page </div> </div> </div> </div> </div>
<div class="example"> <h4>Date</h4> <p>An event can contain a date</p> <div class="ui feed segment"> <div class="event"> <div class="label"> <img src="/images/demo/avatar.jpg"> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> <a>Sally Poodle</a> added you as a friend </div> </div> </div> </div> </div>
<div class="example"> <h4>Additional information</h4> <p>An event can contain additional content explaining the event</p> <div class="ui feed segment"> <div class="event"> <div class="label"> <img src="/images/demo/avatar.jpg"> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> <a>Sally Poodle</a> added 2 photos of you </div> <div class="extra images"> <img src="/images/demo/item1.jpg"> <img src="/images/demo/item2.jpg"> </div> </div> </div> <div class="event"> <div class="label"> <img src="/images/demo/avatar.jpg"> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> <a>Sally Poodle</a> created a post </div> <div class="extra text"> I am a dog and I do not know how to make a post </div> </div> </div> </div> </div>
<h2 class="ui dividing header">Variations</h2> <div class="example"> <h4 class="ui header">Sizes</h4> <p>A feed can have different sizes</p>
<div class="ui grid"> <div class="ten wide column"> <div class="ui small piled feed segment"> <h4 class="ui header">My Activity</h4> <div class="event"> <div class="label"> <img src="/images/demo/avatar2.jpg"> </div> <div class="content"> <div class="date"> Just moments ago </div> <div class="summary"> <a>Sally Poodle</a> added you as a friend </div> </div> </div> <div class="event"> <div class="label"> <i class="circular pencil icon"></i> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> You submitted a new post to the page </div> <div class="extra text"> I am a dog and I do not know how to make a post </div> </div> </div> <div class="event"> <div class="label"> <i class="circular photo icon"></i> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> <a>Sally Poodle</a> added <a>2 new photos</a> of you </div> <div class="extra images"> <img src="/images/demo/item1.jpg"> <img src="/images/demo/item2.jpg"> </div> </div> </div> </div> </div> <div class="six wide column"> <div class="ui small feed segment"> <h4 class="ui header">Followers Activity</h4> <div class="event"> <div class="content"> <div class="summary"> <a>Sally Poodle</a> added <a>hotpup202</a> as a friend </div> </div> </div> <div class="event"> <div class="content"> <div class="summary"> <a>Dally Doodle</a> added <a>hotpup202</a> as a friend </div> </div> </div> <div class="event"> <div class="content"> <div class="summary"> <a>Sally Poodle</a> added <a>sixpack dog</a> as a friend </div> </div> </div> <div class="event"> <div class="content"> <div class="summary"> <a>Dally Doodle</a> added <a>hotpup202</a> as a friend </div> </div> </div> </div> </div> </div>
</div>
</div>
|
