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.
150 lines
6.2 KiB
150 lines
6.2 KiB
---
|
|
layout : 'default'
|
|
css : 'divider'
|
|
title : 'Divider'
|
|
description : 'A divider visually segments content into separate groups'
|
|
type : 'UI Element'
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Types</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Divider</h4>
|
|
<p>A standard divider</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<div class="ui divider"></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Vertical Divider</h4>
|
|
<p>A divider can segment content vertically</p>
|
|
<div class="ui two column middle aligned relaxed grid basic segment">
|
|
<div class="column">
|
|
<div class="ui form segment">
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<div class="ui left labeled icon input">
|
|
<input type="text" placeholder="Username">
|
|
<i class="user icon"></i>
|
|
<div class="ui corner label">
|
|
<i class="asterisk icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<div class="ui left labeled icon input">
|
|
<input type="password">
|
|
<i class="lock icon"></i>
|
|
<div class="ui corner label">
|
|
<i class="asterisk icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui blue submit button">Login</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui vertical divider">
|
|
Or
|
|
</div>
|
|
<div class="center aligned column">
|
|
<div class="huge green ui labeled icon button">
|
|
<i class="signup icon"></i>
|
|
Sign Up
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Horizontal Divider</h4>
|
|
<p>A divider can segment content horizontally</p>
|
|
<h3 class="ui header">Retrieve Order</h3>
|
|
<div class="ui tertiary form segment">
|
|
<div class="field">
|
|
<label>Lookup Order</label>
|
|
<div class="ui left labeled icon input">
|
|
<i class="search icon"></i>
|
|
<input type="text" placeholder="Order #">
|
|
</div>
|
|
</div>
|
|
<div class="ui blue submit button">Search</div>
|
|
</div>
|
|
<div class="ui horizontal divider">
|
|
Or
|
|
</div>
|
|
<div class="ui teal labeled icon button">
|
|
Create New Order
|
|
<i class="add icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Icon Divider</h4>
|
|
<p>A divider can include an icon</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<div class="ui horizontal icon divider">
|
|
<i class="circular heart icon"></i>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A divider can have its colors inverted</p>
|
|
<div class="ui inverted segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<div class="ui inverted divider"></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Fitted</h4>
|
|
<p>A divider can be fitted, without any space above or below it.</p>
|
|
<div class="ui segment">
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
|
|
<div class="ui fitted divider"></div>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Section</h4>
|
|
<p>A divider can provide greater margins to divide sections of content</p>
|
|
<h3 class="ui header">Section One</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<div class="ui section divider"></div>
|
|
<h3 class="ui header">Section Two</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Clearing</h4>
|
|
<p>A divider can clear the contents above it</p>
|
|
<div class="ui segment">
|
|
<h2 class="ui left floated header">Left Header</h2>
|
|
<h2 class="ui right floated header">Right Header</h2>
|
|
<div class="ui clearing divider"></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|