---
layout      : 'default'
css         : 'item'

element     : 'item'
elementType : 'view'

title       : 'Item'
description : 'An item view presents large collections of site content for display'
type        : 'UI View'

themes      : ['Default']
---

<%- @partial('header') %>

<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/item.less" />
<script src="/javascript/item.js"></script>

<div class="main container">

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

  <div class="example">
    <h4 class="ui header">Items</h4>
    <p>A group of items.</p>
    <div class="ui ignored positive icon message">
      <i class="mobile icon"></i>
      <div class="content">
        <h3 class="header">Responsive Element</h3>
        <p>Item views are designed to be responsive with images stacking at mobile resolutions.</p>
      </div>
    </div>
    <div class="ui items">
      <div class="item">
        <div class="image">
          <img src="/images/movies/12years-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">12 Years a Slave</a>
          <div class="meta">
            <span class="cinema">Union Square 14</span>
          </div>
          <div class="description">
            In the pre-Civil War United States, Solomon Northup, a free black man from upstate New York, is abducted and sold into slavery. Facing cruelty as well as unexpected kindnesses Solomon struggles not only to stay alive, but to retain his dignity. In the twelfth year of his unforgettable odyssey, Solomon’s chance meeting with a Canadian abolitionist will forever alter his life.
          </div>
          <div class="extra">
            <div class="ui right floated disabled red button">Sold Out</div>
            <div class="ui horizontal label">IMAX</div>
            <div class="ui horizontal label"><i class="globe icon"></i> Additional Languages</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/totoro-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">My Neighbor Totoro</a>
          <div class="meta">
            <span class="cinema">IFC Cinema</span>
          </div>
          <div class="description">
            Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by Totoros, magical spirits of the forest. When the youngest runs away from home, the older sister seeks help from the spirits to find her.
          </div>
          <div class="extra">
            <div class="ui right floated primary button">
              Buy tickets
              <i class="right chevron icon"></i>
            </div>
            <div class="ui horizontal label">Limited</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/watchmen-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">Watchmen</a>
          <div class="meta">
            <span class="cinema">IFC</span>
          </div>
          <div class="description">
            In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated. The reunited heroes set out to prevent their own destruction, but in doing so uncover a sinister plot that puts all of humanity in grave danger.
          </div>
          <div class="extra">
            <div class="ui right floated primary button">
              Buy tickets
              <i class="right chevron icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

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


  <div class="example">
    <h4 class="ui header">Image</h4>
    <p>A item can contain an image</p>
    <div class="ui warning message">
      Item images default to item <code>@imageWidth</code>, but you can also manually set the image width using a size variation of <code>ui image</code> for example <code>ui tiny image</code>
    </div>
    <div class="ui info message">
      In addition, default image sizes will adjust for both tablet and mobile views. The default theme will force content to stack at mobile views
    </div>
    <div class="ui items">
      <div class="item">
        <div class="image">
          <img src="/images/movies/12years-horizontal.jpg">
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/totoro-horizontal.jpg">
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/watchmen-horizontal.jpg">
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui items">
      <div class="item">
        <a class="ui tiny image">
          <img src="/images/avatar/large/stevie.jpg">
        </a>
      </div>
      <div class="item">
        <a class="ui tiny image">
          <img src="/images/avatar/large/veronika.jpg">
        </a>
      </div>
      <div class="item">
        <a class="ui tiny image">
          <img src="/images/avatar/large/jenny.jpg">
        </a>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Content</h4>
    <p>A item can contain a group of content</p>
    <div class="ui info message">
      Grouping content in a wrapping div is necessary to make sure that content flow does not wrap below the item's image
    </div>
    <div class="ui items">
      <div class="item">
        <div class="image">
          <img src="/images/movies/12years-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">12 Years a Slave</a>
          <div class="meta">
            <span class="cinema">Union Square 14</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/totoro-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">My Neighbor Totoro</a>
          <div class="meta">
            <span class="cinema">IFC Cinema</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/watchmen-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">Watchmen</a>
          <div class="meta">
            <span class="cinema">IFC</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Header</h4>
    <p>A item can contain a header</p>
    <div class="ui items">
      <div class="item">
        <div class="content">
          <div class="header">12 Amazing Secrets for Long Life</div>
          <div class="description">You won't believe how well it works.</div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="header">The Last Words of a Dying Astronaut</div>
          <div class="description">Inspirational words shared by someone truly special.</div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="header">A Funny Trick to Becoming Rich</div>
          <div class="description">This is an easy way anyone can become rich</div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Metadata</h4>
    <p>A item can contain content metadata</p>
    <div class="ui info message">
      <i class="info icon"></i>
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    </div>
    <div class="ui items">
      <div class="item">
        <div class="content">
          <div class="header">Arrowhead Valley Camp</div>
          <div class="meta">
            <span class="price">$1200</span>
            <span class="stay">1 Month</span>
          </div>
          <div class="description">
            This camp in the Hudson Valley is perfect for teenagers from 10-14.
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="header">Buck's Homebrew Stayaway</div>
          <div class="meta">
            <span class="price">$1000</span>
            <span class="stay">2 Weeks</span>
          </div>
          <div class="description">
            This adult stay away from home camp will teach you everything you need to know about  forestry and homebrew.
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="header">Astrology Camp</div>
          <div class="meta">
            <span class="price">$1600</span>
            <span class="stay">6 Weeks</span>
          </div>
          <div class="description">
            Learn astrology the old fashioned way in this stayaway camp for kids aged 8-17.
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Link</h4>
    <p>A item can contain contain links as images, headers, or inside content</p>
    <div class="ui yellow message">
      <i class="star icon"></i>
      To make the entire content of a item link, check out the link variation below
    </div>
    <div class="ui items">
      <div class="item">
        <a class="ui tiny image">
          <img src="/images/avatar/large/stevie.jpg">
        </a>
        <div class="content">
          <a class="header">Stevie Feliciano</a>
          <div class="description">
            <p>Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.</p>
            <a>View Profile</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="ui tiny image">
          <img src="/images/avatar/large/veronika.jpg">
        </a>
        <div class="content">
          <a class="header">Veronika Ossi</a>
          <div class="description">
            <p>Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.</p>
            <a>View Profile</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="ui tiny image">
          <img src="/images/avatar/large/jenny.jpg">
        </a>
        <div class="content">
          <a class="header">Jenny Hess</a>
          <div class="description">
            <p>Jenny is a student studying Media Management at the New School.</p>
            <a>View Profile</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Icons</h4>
    <p>A item can contain icons signifying a 'like' or 'favorite' action</p>
    <div class="ui info message">
      It's recommended to use <code>ui rating</code>
    </div>
    <div class="ui items">
      <div class="item">
        <div class="content">
          <i class="like icon"></i>
          <a class="header">Veronika Ossi</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui items">
      <div class="item">
        <div class="content">
          <i class="favorite icon"></i>
          <a class="header">Justen Kitsune</a>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Description</h4>
    <p>A item can contain a description with a single or multiple paragraphs</p>
    <div class="ui items">
      <div class="item">
        <div class="content">
          <a class="header">Cute Dog</a>
          <div class="meta">2 days ago</div>
          <div class="description">
            <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p>
            <p>Many people also have their own barometers for what makes a cute dog.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Extra Content</h4>
    <p>A item can contain extra content meant to be formatted separately from the main content</p>
    <div class="ui items">
      <div class="item">
        <div class="content">
          <a class="header">Cute Dog</a>
          <div class="meta">2 days ago</div>
          <div class="description">
            <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p>
            <p>Many people also have their own barometers for what makes a cute dog.</p>
          </div>
          <div class="extra">
            <i class="green check icon"></i>
            121 Votes
          </div>
        </div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>
  <div class="example">
    <h4 class="ui header">Divided</h4>
    <p>Items can be divided to better distinguish between grouped content</p>
    <div class="ui info message">
      <i class="info icon"></i>
      The following example uses <a href="/elements/segment.html">ui</a> for legibility only. This is not necessary for using <code>ui items</code>
    </div>
    <div class="ui divided items">
      <div class="item">
        <div class="image">
          <img src="/images/movies/12years-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">12 Years a Slave</a>
          <div class="meta">
            <span class="cinema">Union Square 14</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/totoro-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">My Neighbor Totoro</a>
          <div class="meta">
            <span class="cinema">IFC Cinema</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="/images/movies/watchmen-horizontal.jpg">
        </div>
        <div class="content">
          <a class="header">Watchmen</a>
          <div class="meta">
            <span class="cinema">IFC</span>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="example">
    <h4 class="ui header">Link Item</h4>
    <p>A item can be formatted so that the entire contents link to another page</p>
    <div class="ui link items">
      <div class="item">
        <div class="ui tiny image">
          <img src="/images/avatar/large/stevie.jpg">
        </div>
        <div class="content">
          <div class="header">Stevie Feliciano</div>
          <div class="description">
            <p>Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="ui tiny image">
          <img src="/images/avatar/large/veronika.jpg">
        </div>
        <div class="content">
          <div class="header">Veronika Ossi</div>
          <div class="description">
            <p>Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="ui tiny image">
          <img src="/images/avatar/large/jenny.jpg">
        </div>
        <div class="content">
          <div class="header">Jenny Hess</div>
          <div class="description">
            <p>Jenny is a student studying Media Management at the New School.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui items">
      <a class="item">
        <div class="content">
          <div class="header">Cute Dog</div>
          <div class="meta">
            <span class="category">Animals</span>
          </div>
          <div class="description">
            This item simulates a link without using the A tag for use with javascript links.
          </div>
        </div>
        <div class="extra content">
          <span class="right floated author">
            <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
          </span>
        </div>
      </div>
    </a>
  </div>

  <div class="example">
    <h4 class="ui header">Floated Content</h4>
    <p>Any content element can be floated left or right</p>
    <div class="ui info message">
      <i class="info icon"></i>
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    </div>
    <div class="ui items">
      <div class="item">
        <div class="content">
          <a class="header">Cute Dog</a>
          <div class="meta">
            <span class="right floated time">2 days ago</span>
            <span class="category">Animals</span>
          </div>
          <div class="description">
            Here's a description of a cute dog.
          </div>
          <div class="content">
            <span class="right floated author">
              <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>