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.
182 lines
7.8 KiB
182 lines
7.8 KiB
---
|
|
layout : 'default'
|
|
css : 'divider'
|
|
|
|
element : 'divider'
|
|
elementType : 'element'
|
|
|
|
title : 'Divider'
|
|
description : 'A divider visually segments content into groups'
|
|
type : 'UI Element'
|
|
|
|
themes : ['default']
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/divider.less" />
|
|
|
|
<div class="main container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Divider</h4>
|
|
<div class="ignored ui warning message">If you are looking to add a divider in between grid rows, you can use the <code>ui divided grid</code> variation. For more information check out <a href="/collections/grid.html">the grid definition</a></div>
|
|
<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>
|
|
<div class="ui info message">
|
|
If you use a vertical divider inside a <a href="/collections/grid.html">stackable grid</a> it will automatically adjust from a <code>vertical divider</code> to a <code>horizontal divider</code> at mobile resolutions.
|
|
</div>
|
|
<p>A divider can segment content vertically</p>
|
|
<div class="ui two column middle aligned relaxed fitted stackable grid">
|
|
<div class="column">
|
|
<div class="ui form segment">
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<div class="ui left icon input">
|
|
<input type="text" placeholder="Username">
|
|
<i class="user icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<div class="ui left icon input">
|
|
<input type="password">
|
|
<i class="lock icon"></i>
|
|
</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>
|
|
<div class="ui ignored positive message">Horizontal dividers can also be used in combination with <a href="/elements/header.html">header</a> and <a href="/elements/icon.html">icons</a> to create different styles of dividers.
|
|
</div>
|
|
<div class="ui ignored message">Dividers will automatically vary the size of their dividing rules to match the length of your text</div>
|
|
<div class="ui segment">
|
|
<div class="ui form">
|
|
<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>
|
|
<div class="another example">
|
|
<div class="ui segment">
|
|
<h2 class="ui header">
|
|
Doggie Treat
|
|
<div class="sub header">$4.99 for 100</div>
|
|
</h2>
|
|
<div class="ui primary button">Add to cart</div>
|
|
<p>Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.</p>
|
|
<h4 class="ui horizontal header divider">
|
|
<i class="bar chart icon"></i>
|
|
Specifications
|
|
</h4>
|
|
<table class="ui very basic definition table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="two wide column">Size</td>
|
|
<td>1" x 2"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Weight</td>
|
|
<td>6 ounces</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color</td>
|
|
<td>Yellowish</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Odor</td>
|
|
<td>Not Much Usually</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</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">Hidden</h4>
|
|
<p>A hidden divider divides content without creating a dividing line</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 hidden 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">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>
|