|
|
---layout : 'default'css : 'item'
element : 'item'elementType : 'view'
title : 'Item'description : 'An item view formats large collections of content for display vertically'type : 'UI View'
themes : ['Default']---
<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/item.less" />
<div class="main container">
<h2 class="ui dividing header">Types</h2>
<div class="even example"> <h4 class="ui header">Items</h4> <p>A group of items.</p> <div class="ui items"> <div class="item"> <div class="image"> <img src="/images/movies/12years.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> <span class="available"> <i class="red remove icon"></i> Tickets Unavailable </span> </div> </div> </div> <div class="item"> <div class="image"> <img src="/images/movies/totoro.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> <span class="available"> <i class="green check icon"></i> 10 Seats Avaiable </span> </div> </div> </div> <div class="item"> <div class="image"> <img src="/images/movies/watchmen.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> <span class="available"> <i class="green check icon"></i> 40 Seats Avaiable </span> </div> </div> </div> </div> </div>
<h2 class="ui dividing header">Content</h2>
<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 to denote user actions.</p> <div class="ui info message"> Common actions may contain special formatting, like "star" or "heart". To attach events, on a user action, please check out the <a href="#">state behavior</a>. </div> <div class="ui items"> <div class="item"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <a class="header">Cute Dog</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>
<div class="example"> <h4 class="ui header">Image</h4> <p>A item can contain an image</p> <div class="ui items"> <div class="item"> <div class="image"> <img src="/images/demo/highres.jpg"> </div> <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 items"> <div class="item"> <div class="image"> <img src="/images/logos/arrowhead.png"> </div> <div class="middle aligned content"> <a class="header">Arrowhead Valley Camp</a> <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 class="extra"> <span class="right floated amenities ui label"> <i class="child icon"></i> Child Friendly </span> <span class="available"> <i class="red check icon"></i> 0 Spots Available </span> </div> </div> </div> <div class="item"> <div class="image"> <img src="/images/logos/big-buck.png"> </div> <div class="middle aligned content"> <a class="header">Buck's Homebrew Stayaway</a> <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 class="extra"> <span class="right floated amenities ui label"> <i class="male icon"></i> Adults-Only </span> <span class="available"> <i class="green check icon"></i> 2 Spots Available </span> </div> </div> </div> <div class="item"> <div class="image"> <img src="/images/logos/sunset.png"> </div> <div class="middle aligned content"> <a class="header">Greek Astrology Camp</a> <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 class="extra"> <span class="right floated amenities ui label"> <i class="child icon"></i> Child Friendly </span> <span class="available"> <i class="green check icon"></i> 25 Spots Available </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 items"> <a class="item" href="http://www.dog.com"> <div class="image"> <img src="/images/demo/highres.jpg"> </div> <div class="content"> <div class="header">Cute Dog</div> <div class="meta"> <span class="category">Animals</span> </div> <div class="description"> Click to view more information about this dog at dog.com </div> <div class="extra"> <div class="author"> <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington </div> </div> </div> </a> <a class="item" href="http://www.dog.com"> <div class="image"> <img src="/images/demo/highres3.jpg"> </div> <div class="content"> <div class="header">Magic Dog</div> <div class="meta"> <span class="category">Animals</span> </div> <div class="description"> Click to view more information about a magic dog at dog.com </div> <div class="extra"> <div class="author"> <img class="ui avatar image" src="/images/demo/photo.jpg"> Dog Doggington </div> </div> </div> </a> </div> </div> <div class="another example"> <div class="ui link items"> <div class="item"> <div class="content"> <a class="header">Cute Dog</a> <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> </div> </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>
|
