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.
223 lines
11 KiB
223 lines
11 KiB
---
|
|
layout : 'default'
|
|
css : 'segment'
|
|
title : 'Segment'
|
|
description : 'A segment is used to create a grouping of related content.'
|
|
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">States</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Segment</h4>
|
|
<p>A segment of content</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>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Vertical Segment</h4>
|
|
<p>A vertical segment divides content vertically</p>
|
|
<div class="ui vertical 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>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Horizontal Segment</h4>
|
|
<p>A horizontal segment divides content horizontally</p>
|
|
<div class="ui horizontal 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>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Piled</h4>
|
|
<p>A segment can be formatted to look like a pile of pages</p>
|
|
<div class="ui piled segment">
|
|
<h2>A header</h2>
|
|
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
|
|
|
|
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
|
|
|
|
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Stacked</h4>
|
|
<p>A segment can be formatted to show it contains multiple pages</p>
|
|
<div class="ui 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. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>A segment may show its content is disabled
|
|
<div class="ui disabled 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>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A segment can have its colors inverted for contrast</p>
|
|
<div class="ui inverted segment">
|
|
<p>I'm here to tell you something, and you will probably read me first.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Raised</h4>
|
|
<p>A segment may be formatted to raise above the page.</p>
|
|
<div class="ui raised 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. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Colored</h4>
|
|
<p>A segment can be colored</p>
|
|
<div class="ui blue 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 orange 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 green 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 red 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 purple 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 teal 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<p>These colors can be inverted</p>
|
|
<div class="ui blue 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>
|
|
<div class="ui orange 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>
|
|
<div class="ui green 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>
|
|
<div class="ui red 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>
|
|
<div class="ui purple 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>
|
|
<div class="ui teal 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>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Ordinality</h4>
|
|
<p>A segment can be formatted to appear more or less noticeable</p>
|
|
<div class="ui primary segment">
|
|
<p>I'm here to tell you something, and you will probably read me first.</p>
|
|
</div>
|
|
<div class="ui secondary segment">
|
|
<p>I am pretty noticeable but you might check out other content before you look at me.</p>
|
|
</div>
|
|
<div class="ui tertiary segment">
|
|
<p>If you notice me you must be looking very hard.</p>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<p>Inverted colors may also be more or less noticeable</p>
|
|
<div class="ui primary inverted segment">
|
|
<p>I'm here to tell you something, and you will probably read me first.</p>
|
|
</div>
|
|
<div class="ui secondary inverted segment">
|
|
<p>I am pretty noticeable but you might check out other content before you look at me.</p>
|
|
</div>
|
|
<div class="ui tertiary inverted segment">
|
|
<p>If you notice me you must be looking very hard.</p>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui primary inverted red segment">
|
|
<p>I'm here to tell you something, and you will probably read me first.</p>
|
|
</div>
|
|
<div class="ui secondary inverted red segment">
|
|
<p>I am pretty noticeable but you might check out other content before you look at me.</p>
|
|
</div>
|
|
<div class="ui tertiary inverted red segment">
|
|
<p>If you notice me you must be looking very hard.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearing example">
|
|
<h4 class="ui header">Floated</h4>
|
|
<p>A segment cant sit to the left or right of other content</p>
|
|
<div class="ui right floated segment">
|
|
<p>This segment will appear to the right
|
|
</div>
|
|
<div class="ui left floated segment">
|
|
This segment will appear to the left
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Text Alignment</h4>
|
|
<p>A segment cant have its text aligned to a side</p>
|
|
<div class="ui right aligned segment">
|
|
Right
|
|
</div>
|
|
<div class="ui left aligned segment">
|
|
Left
|
|
</div>
|
|
<div class="ui center aligned segment">
|
|
Center
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Basic</h4>
|
|
<p>A basic segment has no special formatting</p>
|
|
<div class="ui basic 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. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Attached</h4>
|
|
<p>A segment can be attached to other content on a page</p>
|
|
|
|
<div class="ui top attached segment">
|
|
<p>This segment is on top</p>
|
|
</div>
|
|
<div class="ui attached segment">
|
|
<p>This segment is attached on both sides</p>
|
|
</div>
|
|
<div class="ui bottom attached segment">
|
|
<p>This segment is on bottom</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|