---
layout      : 'default'
css         : 'list'

title       : 'UI Elements'
description : 'Elements are the basic building blocks of a website.'
type        : 'Semantic'
---

<%- @partial('header') %>

<div class="main container">

<!--
  <h2 class="ui dividing header">Definition</h2>
  <p>UI Elements are the smallest useful unit for describing page content, and do not contain other elements inside themselves.</p>

  <h3 class="ui header">Plurality</h3>
  <p>Element usually exist by themselves, but they my also be grouped together with other elements of their kind. This forms a plural definition of an element.</p>
  <p>The look and feel of the plural may change to show a relationship, and plural definitions can often share many of the same variations as singular definitions.</p>
  <div class="ui segment">
    <h4 class="ui header">Groups</h4>
    <p>The plural of button is "buttons" a button wrapped inside "buttons" will automatically apply styling appropriate for a group. Many button variations can be used on plural definitions just like they would be used in singular.</p>
    <p>For example, in this case each button will be large because we understand it is a part of the large button group, but the continue button has its own variations applied as well.</p>
    <div class="ui simple ignored divider"></div>
    <div class="large ui buttons">
      <div class="ui secondary button">Cancel</div>
      <div class="ui teal button">Continue <i class="icon right arrow"></i></div>
    </div>
    <br>
    <div class="code" data-type="html">
    <div class="large ui buttons">
      <div class="ui secondary button">Cancel</div>
      <div class="ui teal button">Continue <i class="icon right arrow"></i></div>
    </div>
    </div>
  </div>
 -->
  <h2 class="ui dividing header">Types</h2>

  <div class="ui two stackable element cards">

    <div class="card">
      <div class="image">
        <div class="ui teal labeled icon button">
          <i class="icon user add"></i>Follow
        </div>
        <br><br>
        <div class="ui black icon buttons">
          <div class="ui button"><i class="icon user"></i></div>
          <div class="ui button"><i class="icon settings"></i></div>
          <div class="ui button"><i class="icon trash"></i></div>
        </div>
      </div>
      <div class="content">
        <a href="elements/button.html" class="header">Button</a>
        <p>A button indicates a possible user action.</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <div class="ui horizontal divider"><i class="github icon"></i></div>
      </div>
      <div class="content">
        <a href="elements/divider.html" class="header">Divider</a>
        <p>A divider visually segments content into separate groups</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <h2 class="ui blue block header">
          Section 2
          <div class="sub header">The second section of the website</div>
        </h2>
      </div>
      <div class="content">
        <a href="elements/header.html" class="header">Header</a>
        <p>Headers provide a short summary of content</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <div class="ui red active progress">
          <div class="bar"></div>
        </div>
      </div>
      <div class="content">
        <a href="elements/progress.html" class="header">Progress Bar</a>
        <p>A progress bar displays progress on a task</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <div class="ui inverted stacked segment">
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
        </div>
      </div>
      <div class="content">
        <a href="elements/segment.html" class="header">Segment</a>
        <p>A segment is used to create a grouping of related content.</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <div class="ui left floated circular image">
          <img src="/images/demo/avatar.jpg">
        </div>
        <div class="ui right floated circular image">
          <img src="/images/demo/avatar2.jpg">
        </div>
      </div>
      <div class="content">
      <a href="elements/image.html" class="header">Image</a>
      <p>An image is a graphic representation of something</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <div class="ui four fluid steps">
          <div class="ui step">
            First
          </div>
          <div class="ui active step">
            Second
          </div>
          <div class="ui disabled step">
            Third
          </div>
          <div class="ui disabled step">
            Last
          </div>
        </div>
      </div>
      <div class="content">
        <a href="elements/step.html" class="header">Step</a>
        <p>Steps show the current activity in a series of steps.</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <i class="archive icon"></i>
        <i class="attachment icon"></i>
        <i class="browser icon"></i>
        <i class="bug icon"></i>
        <i class="calendar icon"></i>
        <i class="cart icon"></i>
        <i class="certificate icon"></i>
        <i class="chat icon"></i>
        <i class="cloud icon"></i>
        <i class="code icon"></i>
        <i class="comment icon"></i>
        <i class="dashboard icon"></i>
        <i class="desktop icon"></i>
        <i class="empty calendar icon"></i>
        <i class="external url icon"></i>
        <i class="external url sign icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="folder icon"></i>
        <i class="folder open icon"></i>
        <i class="folder open outline icon"></i>
        <i class="folder outline icon"></i>
        <i class="help icon"></i>
        <i class="home icon"></i>
        <i class="inbox icon"></i>
        <i class="info icon"></i>
        <i class="info letter icon"></i>
        <i class="legal icon"></i>
        <i class="location arrow icon"></i>
        <i class="mail icon"></i>
        <i class="mail outline icon"></i>
        <i class="map icon"></i>
        <i class="map marker icon"></i>
        <i class="mobile icon"></i>
        <i class="music icon"></i>
        <i class="outline chat icon"></i>
        <i class="outline comment icon"></i>
        <i class="payment icon"></i>
        <i class="photo icon"></i>
        <i class="qr code icon"></i>
        <i class="question icon"></i>
        <i class="rss icon"></i>
        <i class="rss sign icon"></i>
        <i class="setting icon"></i>
        <i class="settings icon"></i>
        <i class="signal icon"></i>
        <i class="sitemap icon"></i>
        <i class="table icon"></i>
        <i class="tablet icon"></i>
        <i class="tag icon"></i>
        <i class="tags icon"></i>
        <i class="tasks icon"></i>
        <i class="terminal icon"></i>
        <i class="text file icon"></i>
        <i class="text file outline icon"></i>
        <i class="time icon"></i>
        <i class="trash icon"></i>
        <i class="url icon"></i>
        <i class="user icon"></i>
        <i class="users icon"></i>
        <i class="video icon"></i>
        <i class="add icon"></i>
        <i class="add sign box icon"></i>
        <i class="add sign icon"></i>
        <i class="adjust icon"></i>
        <i class="bookmark empty icon"></i>
        <i class="bookmark icon"></i>
        <i class="cloud download icon"></i>
        <i class="cloud upload icon"></i>
        <i class="collapse icon"></i>
        <i class="crop icon"></i>
        <i class="download disk icon"></i>
        <i class="download icon"></i>
        <i class="edit icon"></i>
        <i class="edit sign icon"></i>
        <i class="empty flag icon"></i>
        <i class="exchange icon"></i>
        <i class="expand icon"></i>
        <i class="filter icon"></i>
        <i class="flag icon"></i>
        <i class="fork code icon"></i>
        <i class="forward mail icon"></i>
        <i class="fullscreen icon"></i>
        <i class="hide icon"></i>
        <i class="level down icon"></i>
        <i class="level up icon"></i>
        <i class="off icon"></i>
      </div>
      <div class="content">
        <a href="elements/icon.html" class="header">Icon</a>
        <p>An icon is a glyph used to represent another concept more simply</p>
      </div>
    </div>
    <div class="card">
      <div class="image">
        <div class="ui red label">Dog</div>
        <div class="ui teal corner label">
          <div class="text">New</div>
        </div>
        <br><br>
        <div class="ui blue ribbon label">HTML</div>
      </div>
      <div class="content">
        <a href="elements/label.html" class="header">Label</a>
        <p>Labels give descriptions to sections of content.</p>
      </div>
    </div>
  </div>



</div>