You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
247 lines
8.7 KiB
247 lines
8.7 KiB
---
|
|
layout : 'default'
|
|
css : 'item'
|
|
|
|
title : 'Item'
|
|
description : 'An item view can be used to list 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 group of items. </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">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Cute Dog</div>
|
|
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
|
|
</div>
|
|
<div class="extra content">
|
|
199 Votes
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<img src="/images/demo/highres2.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Faithful Dog</div>
|
|
<div class="meta">5 days ago</div>
|
|
<div 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.</div>
|
|
</div>
|
|
<div class="extra content">
|
|
199 Votes
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<img src="/images/demo/highres3.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Silly Dog</div>
|
|
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
|
|
</div>
|
|
<div class="extra content">
|
|
199 Votes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another text example">
|
|
<div class="ui items">
|
|
<div class="item">
|
|
<div class="content">
|
|
<div class="header">Cute Dog</div>
|
|
<div class="meta">2 days ago</div>
|
|
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
|
|
<div class="extra">
|
|
121 Votes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="content">
|
|
<div class="header">Faithful Dog</div>
|
|
<div class="meta">5 days ago</div>
|
|
<div 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.</div>
|
|
<div class="extra">
|
|
121 Votes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="content">
|
|
<div class="header">Silly Dog</div>
|
|
<div class="meta">1 week ago</div>
|
|
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
|
|
<div class="extra">
|
|
121 Votes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">List</h4>
|
|
<p>An 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">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Cute Dog</div>
|
|
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
|
|
</div>
|
|
<div class="extra content">
|
|
199 Votes
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<img src="/images/demo/highres2.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Faithful Dog</div>
|
|
<div class="meta">5 days ago</div>
|
|
<div 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.</div>
|
|
</div>
|
|
<div class="extra content">
|
|
199 Votes
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<img src="/images/demo/highres3.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Silly Dog</div>
|
|
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
|
|
</div>
|
|
<div class="extra content">
|
|
199 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="header">Cute Dog</div>
|
|
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
|
|
<div class="extra content">
|
|
11 Votes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<img src="/images/demo/highres6.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Faithful Dog</div>
|
|
<div class="meta">5 days ago</div>
|
|
<div 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.</div>
|
|
<div class="extra content">
|
|
11 Votes
|
|
</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="header">Cute Dog</div>
|
|
<div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
|
|
</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="header">Faithful Dog</div>
|
|
<div 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.</div>
|
|
</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="header">Silly Dog</div>
|
|
<div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div>
|
|
</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="header">Happy Dog</div>
|
|
<div class="description">Happy dogs are pretty interesting if you are an unhappy person.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|