---
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>