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.
111 lines
3.7 KiB
111 lines
3.7 KiB
---
|
|
layout : 'default'
|
|
css : 'divider'
|
|
title : 'Divider'
|
|
type : 'UI Element'
|
|
---
|
|
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui header">Divider</h1>
|
|
<p>A divider shows divisions between content</p>
|
|
</div>
|
|
</div>
|
|
<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 header">Standard</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Divider</h4>
|
|
<p>A divider</p>
|
|
<div class="ui 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 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">Vertical Divider</h4>
|
|
<p>A divider can segment content vertically</p>
|
|
<div class="ui two column middle aligned grid basic segment">
|
|
<div class="column">
|
|
<div class="ui form segment">
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<div class="ui labeled icon input">
|
|
<input type="password" placeholder="Username">
|
|
<i class="user icon"></i>
|
|
<div class="ui corner label">
|
|
<i class="icon asterisk"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<div class="ui labeled icon input">
|
|
<input type="password">
|
|
<i class="lock icon"></i>
|
|
<div class="ui corner label">
|
|
<i class="icon asterisk"></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="icon check"></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 form secondary segment">
|
|
<div class="field">
|
|
<label>Order #</label>
|
|
<div class="ui labeled icon input">
|
|
<input type="text" placeholder="Order #">
|
|
</div>
|
|
</div>
|
|
<div class="ui blue submit button">Submit</div>
|
|
</div>
|
|
<div class="ui horizontal divider">
|
|
Or
|
|
</div>
|
|
<div class="large teal ui labeled icon button">
|
|
<i class="icon cart"></i>
|
|
Create New Order
|
|
</div>
|
|
</div>
|
|
<h2 class="ui 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>
|
|
|
|
</body>
|
|
</html>
|