|
|
---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>
|
