|
|
---layout : 'default'standalone : truecss : '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>
|
