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.
 
 
 

144 lines
4.7 KiB

y---
layout : 'default'
css : 'list'
title : 'UI Collections'
description : 'UI collections are elements which contain other elements which often appear together.'
type : 'Semantic'
---
<%- @partial('header') %>
<div class="main container">
<h2 class="ui dividing header">Types of Collections</h2>
<div class="ui type two stackable collection cards">
<div class="card">
<div class="image">
<div class="ui segment">
<div class="ui breadcrumb">
<a class="section">Food</a>
<div class="divider"> / </div>
<a class="section">Fruit</a>
<div class="divider"> / </div>
<div class="active section">Apples</div>
</div>
<div class="ui divider"></div>
<div class="ui breadcrumb">
<a class="section">Food</a>
<i class="right arrow icon divider"></i>
<a class="section">Fruit</a>
<i class="right arrow icon divider"></i>
<div class="active section">Apples</div>
</div>
</div>
</div>
<div class="content">
<a href="/collections/breadcrumb.html" class="header">Breadcrumb</a>
<p class="description">A breadcrumb is a menu to show the location of the current section in relation to other sections.</p>
</div>
</div>
<div class="card">
<div class="image">
<div class="ui fluid form segment">
<div class="field">
<label>Name</label>
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" placeholder="Name">
</div>
</div>
<div class="field">
<label>E-mail</label>
<div class="ui left icon input">
<i class="email icon"></i>
<input type="text" placeholder="E-mail">
</div>
</div>
</div>
</div>
<div class="content">
<a href="/collections/form.html" class="header">Form</a>
<p class="description">A form is used to solicit a user response</p>
</div>
</div>
<div class="card">
<div class="image">
<div class="ui three column aligned page grid">
<div class="column"><div class="ui segment">1</div></div>
<div class="column"><div class="ui segment">2</div></div>
<div class="column"><div class="ui segment">3</div></div>
</div>
</div>
<div class="content">
<a href="/collections/grid.html" class="header">Grid</a>
<p class="description">A grid helps harmonize negative space in a layout</p>
</div>
</div>
<div class="card">
<div class="image">
<div class="ui three item menu">
<a class="active item">Friends</a>
<a class="item">Messages</a>
<a class="item">Profile</a>
</div>
<div class="ui three item secondary menu">
<a class="active item">Friends</a>
<a class="item">Messages</a>
<a class="item">Profile</a>
</div>
<div class="ui three item secondary pointing menu">
<a class="active item">Friends</a>
<a class="item">Messages</a>
<a class="item">Profile</a>
</div>
</div>
<div class="content">
<a href="/collections/menu.html" class="header">Menu</a>
<p class="description">A menu organizes related links</p>
</div>
</div>
<div class="card">
<div class="image">
<div class="ui error message top attached">
<div class="header">We're sorry we can't process your idea just yet</div>
<p>Please enter your name</p>
</div>
</div>
<div class="content">
<a href="collections/message.html" class="header">Message</a>
<p class="description">Messages alert a user to something important.</p>
</div>
</div>
<div class="card">
<div class="image">
<table class="ui celled sortable definition top attached table segment">
<thead>
<tr><th>Name</th>
<th>Status</th>
</tr></thead>
<tbody>
<tr class="positive">
<td>John</td>
<td> Approved</td>
</tr><tr>
<td>John</td>
<td> Unconfirmed</td>
</tr>
<tr class="negative">
<td>Sally</td>
<td> Denied</td>
</tr>
</tbody>
</table>
</div>
<div class="content">
<a href="/collections/table.html" class="header">Table</a>
<p class="description">A table collects related data into rows of content</p>
</div>
</div>
</div>
</div>