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.
252 lines
8.9 KiB
252 lines
8.9 KiB
---
|
|
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>
|