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>