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.
101 lines
2.8 KiB
101 lines
2.8 KiB
---
|
|
layout : 'default'
|
|
css : 'index'
|
|
|
|
title : 'UI Collections'
|
|
type : 'Semantic'
|
|
---
|
|
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1>UI Collection</h1>
|
|
<p>UI collections are elements which contain other elements which often appear together.<p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
<h2>Types of Collections</h2>
|
|
|
|
<div class="ui horizontal type items">
|
|
<div class="item">
|
|
<div class="image">
|
|
<div class="ui fluid form">
|
|
<div class="field">
|
|
<label>Name</label>
|
|
<input class="ui input" placeholder="Name">
|
|
</div>
|
|
<div class="field">
|
|
<label>E-mail</label>
|
|
<input class="ui input" placeholder="E-mail">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<a href="/collections/form.html" class="name">Form</a>
|
|
<p>A form is used to solicit a user response</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<div class="ui three column aligned responsive 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="name">Grid</a>
|
|
<p>A grid helps harmonize negative space in a layout</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<div class="ui inverted menu">
|
|
<a class="item">Friends</a>
|
|
<a class="item">Messages</a>
|
|
<a class="item">Profile</a>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<a href="/collections/menu.html" class="name">Menu</a>
|
|
<p>A menu organizes related links</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<table class="ui table">
|
|
<thead>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>John</td>
|
|
<td class="positive"><i class="icon check"></i> Approved</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="content">
|
|
<a href="/collections/table.html" class="name">Table</a>
|
|
<p>A table collects related data into rows of content</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image">
|
|
<div class="ui warning message">
|
|
<div class="header">Alert</div>
|
|
<p>You forgot your name!</p>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<a href="collections/block.html" class="name">Message</a>
|
|
<p>Messages alert a user to something important.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|