---
layout      : 'default'
standalone  : true
css         : 'item'

title       : 'Item'
description : 'An item view presents related site content'
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">Variations</a>
    </div>
  </div>

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

  <div class="example">
    <h4 class="ui header">Items</h4>
    <p>A basic item list. </p>
    <div class="ignored yellow ui message">
      <i class="info icon"></i>
      Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.
    </div>
    <div class="ui items">
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres.jpg">
          <a class="like ui corner label">
            <i class="like icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Cute Dog</div>
          <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
          <div class="extra">
              199 votes
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres2.jpg">
          <a class="like ui corner label">
            <i class="like icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="meta">5 days ago</div>
          <div class="name">Faithful Dog</div>
          <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
          <div class="extra">
              311 votes
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres3.jpg">
          <a class="like ui corner label">
            <i class="like icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Silly Dog</div>
          <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
          <div class="extra">
              522 votes
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="text example">
    <div class="ui items">
      <div class="item">
        <div class="content">
          <div class="meta">2 days ago</div>
          <div class="name">Cute Dog</div>
          <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
        </div>
        <div class="extra">
            199 votes
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="meta">5 days ago</div>
          <div class="name">Faithful Dog</div>
          <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
        </div>
        <div class="extra">
            311 votes
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="meta">1 week ago</div>
          <div class="name">Silly Dog</div>
          <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
        </div>
        <div class="extra">
            522 votes
        </div>
      </div>
    </div>
  </div>


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

  <div class="example">
    <h4 class="ui header">Stackable</h4>
    <div class="ui ignored info message">Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints</div>
    <p>An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes</p>
    <div class="ui stackable items">
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres5.jpg">
          <a class="like ui corner label">
            <i class="like icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Cute Dog</div>
          <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
          <div class="extra">
              199 votes
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres6.jpg">
          <a class="like ui corner label">
            <i class="like icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="meta">5 days ago</div>
          <div class="name">Faithful Dog</div>
          <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
          <div class="extra">
              311 votes
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Connected</h4>
    <p>An item list can be automatically sized to be even height.</p>
    <div class="ignored warning ui message">
      <i class="info icon"></i>
      Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified.
    </div>
    <div class="ui connected items">
      <div class="row">
        <div class="item">
          <div class="image">
            <img src="/images/demo/highres4.jpg">
          </div>
          <div class="content">
            <div class="name">Cute Dog</div>
            <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
          </div>
        </div>
        <div class="item">
          <div class="image">
            <img src="/images/demo/highres5.jpg">
          </div>
          <div class="content">
            <div class="name">Faithful Dog</div>
            <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
          </div>
        </div>
        <div class="item">
          <div class="image">
            <img src="/images/demo/highres3.jpg">
          </div>
          <div class="content">
            <div class="name">Silly Dog</div>
            <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="another text example">
    <div class="ui six connected items">
      <div class="row">
        <div class="item">
          <div class="content">
            <div class="name">Cute Dog</div>
            <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
          </div>
        </div>
        <div class="item">
          <div class="content">
            <div class="name">Faithful Dog</div>
            <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
          </div>
        </div>
        <div class="item">
          <div class="content">
            <div class="name">Silly Dog</div>
            <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
          </div>
        </div>
        <div class="item">
          <div class="content">
            <div class="name">Cute Dog</div>
            <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
          </div>
        </div>
        <div class="item">
          <div class="content">
            <div class="name">Faithful Dog</div>
            <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
          </div>
        </div>
        <div class="item">
          <div class="content">
            <div class="name">Silly Dog</div>
            <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
          </div>
        </div>
      </div>
    </div>
  </div>



  <div class="example">
    <h4 class="ui header">Column count</h4>
    <p>An item list can list how many columns should exist in a row</p>
    <div class="ui four items">
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres4.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Cute Dog</div>
          <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres5.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Faithful Dog</div>
          <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres3.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Silly Dog</div>
          <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres2.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Happy Dog</div>
          <p class="description">Happy dogs are pretty interesting if you are an unhappy person.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <p>A connected item list with a specified column count</p>
    <div class="ui five connected items">
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres4.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Cute Dog</div>
          <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres5.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Faithful Dog</div>
          <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres3.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Silly Dog</div>
          <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres2.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Happy Dog</div>
          <p class="description">Happy dogs are pretty interesting if you are an unhappy person.</p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/demo/highres.jpg">
          <a class="star ui corner label">
            <i class="star icon"></i>
          </a>
        </div>
        <div class="content">
          <div class="name">Quiet Dog</div>
          <p class="description">A quiet dog is nice if you dont like a lot of upkeep for your dogs.</p>
        </div>
      </div>
    </div>
  </div>

</div>