---
layout      : 'default'
css         : 'feed'

title       : 'Feed'
description : 'A feed presents user activity chronologically'
type        : 'UI View'

element     : 'feed'
elementType : 'view'

themes      : ['Default', 'Timeline']
---

<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/feed.less" />

<%- @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 class="ui header">Feed</h4>
    <p>A standard feed with some optional elements</p>
    <div class="ui feed segment">
      <div class="event">
        <div class="label">
          <i class="user icon"></i>
        </div>
        <div class="content">
          <div class="summary">
            <a class="user">
              <img src="/images/demo/avatar2.jpg">
              Sally Poodle
            </a> added you as a friend
            <div class="date">
              1 Hour Ago
            </div>
          </div>
          <div class="meta">
            <a class="replies">
              2 <i class="comments icon"></i>
            </a>
            <a class="like">
              4 <i class="like icon"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="event">
        <div class="label">
          <i class="pencil icon"></i>
        </div>
        <div class="content">
          <div class="summary">
            You submitted a new post to the page
            <div class="date">
              3 days ago
            </div>
          </div>
          <div class="extra text">
            I am a dog and I do not know how to make a post
          </div>
          <div class="meta">
            <a class="replies">
              0 <i class="comments icon"></i>
            </a>
            <a class="like">
              5 <i class="like icon"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="event">
        <div class="label">
          <i class="photo icon"></i>
        </div>
        <div class="content">
          <div class="date">
            4 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 class="meta">
            <a class="replies">
              2 <i class="comments icon"></i>
            </a>
            <a class="like">
              4 <i class="like icon"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="event">
        <div class="label">
          <img src="/images/demo/avatar.jpg">
        </div>
        <div class="content">
          <div class="summary">
            <a class="user">
              Sally Poodle
            </a> added you as a friend
            <div class="date">
              1 Hour Ago
            </div>
          </div>
          <div class="meta">
            <a class="replies">
              2 <i class="comments icon"></i>
            </a>
            <a class="like">
              4 <i class="like icon"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="event">
        <div class="label">
          <i class="pencil icon"></i>
        </div>
        <div class="content">
          <div class="summary">
            You submitted a new post to the page
            <div class="date">
              3 days ago
            </div>
          </div>
          <div class="extra text">
            I am a dog and I do not know how to make a post
          </div>
          <div class="meta">
            <a class="replies">
              0 <i class="comments icon"></i>
            </a>
            <a class="like">
              5 <i class="like icon"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="event">
        <div class="label">
          <i class="photo icon"></i>
        </div>
        <div class="content">
          <div class="date">
            4 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 class="meta">
            <a class="replies">
              2 <i class="comments icon"></i>
            </a>
            <a class="like">
              4 <i class="like icon"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Content</h2>

  <div class="example">
    <h4 class="ui header">Label</h4>
    <p>An event can contain a label</p>
    <div class="ui feed">
      <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="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 class="ui header">Date</h4>
    <p>An event can contain a date</p>
    <div class="ui feed">
      <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 class="ui header">Additional information</h4>
    <p>An event can contain additional content explaining the event</p>
    <div class="ui feed">
      <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 feed">
          <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="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="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">
          <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>