lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
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.
1 Commit
14 Branches
0 Tags
75 MiB
 
 
 
 
 
Branch: gh-pages
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'gh-pages'
${ noResults }
Semantic-UI-Docs/elements/segment.html

1634 lines
47 KiB
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="image_src" type="image/jpeg" href="/images/logo.png" />
<!-- Site Properities -->
<meta name="generator" content="DocPad v6.78.1" />
<title>Segment | Semantic UI</title>
<meta name="description" content="A segment is used to create a grouping of related content" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
<script src="/javascript/library/jquery.min.js"></script>
<script src="/javascript/library/clipboard.min.js"></script>
<script src="/javascript/library/cookie.min.js"></script>
<script src="/javascript/library/easing.min.js"></script>
<script src="/javascript/library/highlight.min.js"></script>
<script src="/javascript/library/history.min.js"></script>
<script src="/javascript/library/tablesort.min.js"></script>
<script src="/dist/semantic.min.js"></script>
<script src="/javascript/docs.js"></script>
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44039803-2', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
window.liveSettings = {
api_key : '9ede3015b9f84c1aabc81ab839c55d74',
parse_attr : [
'data-title',
'data-content'
],
detectlang : false,
autocollect : true,
ignore_tags : ['i', 'code', 'pre'],
parse_attr : ['data-title', 'data-content', 'data-text'],
ignore_class : ['code', 'anchor']
};
</script>
<script type="text/javascript" src="http://cdn.transifex.com/live.js"></script>
</head>
<body id="example" class="segment" ontouchstart="">
<div class="ui vertical inverted sidebar menu" id="toc">
<div class="item">
<a class="ui logo icon image" href="/">
<img src="/images/logo.png">
</a>
<a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
<b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
<b>New in 2.1</b>
</a>
<div class="item">
<div class="header">Introduction</div>
<div class="menu">
<a class="item" href="/introduction/integrations.html">
Integrations
</a>
<a class="item" href="/introduction/build-tools.html">
Build Tools
</a>
<a class="item" href="/introduction/advanced-usage.html">
Recipes
</a>
<a class="item" href="/introduction/glossary.html">
Glossary
</a>
</div>
</div>
<div class="item">
<div class="header">Usage</div>
<div class="menu">
<a class="item" href="/usage/theming.html">
Theming
</a>
<a class="item" href="/usage/layout.html">
Layouts
</a>
</div>
</div>
<div class="item">
<div class=" header">Globals</div>
<div class="menu">
<a class="item" href="/globals/reset.html">
Reset
</a>
<a class="item" href="/globals/site.html">
Site
</a>
</div>
</div>
<div class="item">
<div class="active header">Elements</div>
<div class="menu">
<a class="item" href="/elements/button.html">
Button
</a>
<a class="item" href="/elements/container.html">
Container
</a>
<a class="item" href="/elements/divider.html">
Divider
</a>
<a class="item" href="/elements/flag.html">
Flag
</a>
<a class="item" href="/elements/header.html">
Header
</a>
<a class="item" href="/elements/icon.html">
Icon
</a>
<a class="item" href="/elements/image.html">
Image
</a>
<a class="item" href="/elements/input.html">
Input
</a>
<a class="item" href="/elements/label.html">
Label
</a>
<a class="item" href="/elements/list.html">
List
</a>
<a class="item" href="/elements/loader.html">
Loader
</a>
<a class="item" href="/elements/rail.html">
Rail
</a>
<a class="item" href="/elements/reveal.html">
Reveal
</a>
<a class="active item" href="/elements/segment.html">
Segment
</a>
<a class="item" href="/elements/step.html">
Step
</a>
</div>
</div>
<div class="item">
<div class=" header">Collections</div>
<div class="menu">
<a class="item" href="/collections/breadcrumb.html">
Breadcrumb
</a>
<a class="item" href="/collections/form.html">
Form
</a>
<a class="item" href="/collections/grid.html">
Grid
</a>
<a class="item" href="/collections/menu.html">
Menu
</a>
<a class="item" href="/collections/message.html">
Message
</a>
<a class="item" href="/collections/table.html">
Table
</a>
</div>
</div>
<div class="item">
<div class=" header">Views</div>
<div class="menu">
<a class="item" href="/views/advertisement.html">
Advertisement
</a>
<a class="item" href="/views/card.html">
Card
</a>
<a class="item" href="/views/comment.html">
Comment
</a>
<a class="item" href="/views/feed.html">
Feed
</a>
<a class="item" href="/views/item.html">
Item
</a>
<a class="item" href="/views/statistic.html">
Statistic
</a>
</div>
</div>
<div class="item">
<div class=" header">Modules</div>
<div class="menu">
<a class="item" href="/modules/accordion.html">
Accordion
</a>
<a class="item" href="/modules/checkbox.html">
Checkbox
</a>
<a class="item" href="/modules/dimmer.html">
Dimmer
</a>
<a class="item" href="/modules/dropdown.html">
Dropdown
</a>
<a class="item" href="/modules/embed.html">
Embed
</a>
<a class="item" href="/modules/modal.html">
Modal
</a>
<a class="item" href="/modules/nag.html">
Nag
</a>
<a class="item" href="/modules/popup.html">
Popup
</a>
<a class="item" href="/modules/progress.html">
Progress
</a>
<a class="item" href="/modules/rating.html">
Rating
</a>
<a class="item" href="/modules/search.html">
Search
</a>
<a class="item" href="/modules/shape.html">
Shape
</a>
<a class="item" href="/modules/sidebar.html">
Sidebar
</a>
<a class="item" href="/modules/sticky.html">
Sticky
</a>
<a class="item" href="/modules/tab.html">
Tab
</a>
<a class="item" href="/modules/transition.html">
Transition
</a>
</div>
</div>
<div class="item">
<div class=" header">Behaviors</div>
<div class="menu">
<a class="item" href="/behaviors/api.html">
API
</a>
<a class="item" href="/behaviors/form.html">
Form Validation
</a>
<a class="item" href="/behaviors/visibility.html">
Visibility
</a>
</div>
</div>
</div>
<div class="ui black big launch right attached fixed button">
<i class="content icon"></i>
<span class="text">Menu</span>
</div>
<div class="ui fixed inverted main menu">
<div class="ui container">
<a class="launch icon item">
<i class="content icon"></i>
</a>
<div class="item">
Segment
</div>
<div class="right menu">
<div class="vertically fitted borderless item">
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
</div>
<!--
<div class="item">
<div class="ui hidden right aligned search input" id="search">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="inverted search link icon" data-content="Search UI"></i>
</div>
<div class="results"></div>
</div>
</div>
-->
</div>
</div>
</div>
<div class="pusher">
<div class="full height">
<div class="toc">
<div class="ui vertical inverted sticky menu">
<div class="item">
<a class="ui logo icon image" href="/">
<img src="/images/logo.png">
</a>
<a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
<b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
<b>New in 2.1</b>
</a>
<div class="item">
<div class="header">Introduction</div>
<div class="menu">
<a class="item" href="/introduction/integrations.html">
Integrations
</a>
<a class="item" href="/introduction/build-tools.html">
Build Tools
</a>
<a class="item" href="/introduction/advanced-usage.html">
Recipes
</a>
<a class="item" href="/introduction/glossary.html">
Glossary
</a>
</div>
</div>
<div class="item">
<div class="header">Usage</div>
<div class="menu">
<a class="item" href="/usage/theming.html">
Theming
</a>
<a class="item" href="/usage/layout.html">
Layouts
</a>
</div>
</div>
<div class="item">
<div class=" header">Globals</div>
<div class="menu">
<a class="item" href="/globals/reset.html">
Reset
</a>
<a class="item" href="/globals/site.html">
Site
</a>
</div>
</div>
<div class="item">
<div class="active header">Elements</div>
<div class="menu">
<a class="item" href="/elements/button.html">
Button
</a>
<a class="item" href="/elements/container.html">
Container
</a>
<a class="item" href="/elements/divider.html">
Divider
</a>
<a class="item" href="/elements/flag.html">
Flag
</a>
<a class="item" href="/elements/header.html">
Header
</a>
<a class="item" href="/elements/icon.html">
Icon
</a>
<a class="item" href="/elements/image.html">
Image
</a>
<a class="item" href="/elements/input.html">
Input
</a>
<a class="item" href="/elements/label.html">
Label
</a>
<a class="item" href="/elements/list.html">
List
</a>
<a class="item" href="/elements/loader.html">
Loader
</a>
<a class="item" href="/elements/rail.html">
Rail
</a>
<a class="item" href="/elements/reveal.html">
Reveal
</a>
<a class="active item" href="/elements/segment.html">
Segment
</a>
<a class="item" href="/elements/step.html">
Step
</a>
</div>
</div>
<div class="item">
<div class=" header">Collections</div>
<div class="menu">
<a class="item" href="/collections/breadcrumb.html">
Breadcrumb
</a>
<a class="item" href="/collections/form.html">
Form
</a>
<a class="item" href="/collections/grid.html">
Grid
</a>
<a class="item" href="/collections/menu.html">
Menu
</a>
<a class="item" href="/collections/message.html">
Message
</a>
<a class="item" href="/collections/table.html">
Table
</a>
</div>
</div>
<div class="item">
<div class=" header">Views</div>
<div class="menu">
<a class="item" href="/views/advertisement.html">
Advertisement
</a>
<a class="item" href="/views/card.html">
Card
</a>
<a class="item" href="/views/comment.html">
Comment
</a>
<a class="item" href="/views/feed.html">
Feed
</a>
<a class="item" href="/views/item.html">
Item
</a>
<a class="item" href="/views/statistic.html">
Statistic
</a>
</div>
</div>
<div class="item">
<div class=" header">Modules</div>
<div class="menu">
<a class="item" href="/modules/accordion.html">
Accordion
</a>
<a class="item" href="/modules/checkbox.html">
Checkbox
</a>
<a class="item" href="/modules/dimmer.html">
Dimmer
</a>
<a class="item" href="/modules/dropdown.html">
Dropdown
</a>
<a class="item" href="/modules/embed.html">
Embed
</a>
<a class="item" href="/modules/modal.html">
Modal
</a>
<a class="item" href="/modules/nag.html">
Nag
</a>
<a class="item" href="/modules/popup.html">
Popup
</a>
<a class="item" href="/modules/progress.html">
Progress
</a>
<a class="item" href="/modules/rating.html">
Rating
</a>
<a class="item" href="/modules/search.html">
Search
</a>
<a class="item" href="/modules/shape.html">
Shape
</a>
<a class="item" href="/modules/sidebar.html">
Sidebar
</a>
<a class="item" href="/modules/sticky.html">
Sticky
</a>
<a class="item" href="/modules/tab.html">
Tab
</a>
<a class="item" href="/modules/transition.html">
Transition
</a>
</div>
</div>
<div class="item">
<div class=" header">Behaviors</div>
<div class="menu">
<a class="item" href="/behaviors/api.html">
API
</a>
<a class="item" href="/behaviors/form.html">
Form Validation
</a>
<a class="item" href="/behaviors/visibility.html">
Visibility
</a>
</div>
</div>
</div>
</div>
<div class="article">
<div class="ui masthead vertical segment">
<div class="ui container">
<div class="introduction">
<h1 class="ui header">
Segment
<div class="sub header">
<a class="twitter-share-button twitter"
href="http://twitter.com/share"
data-text="Semantic UI is a next generation UI framework"
data-url="http://semantic-ui.com"
data-via="semanticui">
</a>
<script type="text/javascript">
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
</script>
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
A segment is used to create a grouping of related content
</div>
</h1>
<div class="ui hidden divider"></div>
<div class="ui right floated main menu">
<a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/elements/segment.html.eco">
<i class="edit icon"></i>
</a>
<a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Segment] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Segment should do this%0A%0A**Result**%0AThe Segment does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
<i class="bug icon"></i>
</a>
<a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
<i class="alternate github icon"></i>
</a>
</div>
<div class="ui right floated main menu">
<a class="music popup icon item" data-content="Play Music">
<i class="music icon"></i>
</a>
<div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
<i class="world icon"></i>
<div class="menu">
<div class="header">Select Language</div>
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search languages...">
</div>
<div class="scrolling menu">
<div class="item" data-percent="100" data-value="en" data-text="English" data-english="English">
<span class="description">English</span>
English
</div>
<div class="item" data-percent="94" data-value="da" data-text="dansk" data-english="Danish">
<span class="description">dansk</span>
Danish
</div>
<div class="item" data-percent="94" data-value="es" data-text="Español" data-english="Spanish">
<span class="description">Español</span>
Spanish
</div>
<div class="item" data-percent="34" data-value="zh" data-text="简体中文" data-english="Chinese">
<span class="description">简体中文</span>
Chinese
</div>
<div class="item" data-percent="54" data-value="zh_TW" data-text="中文 (臺灣)" data-english="Chinese (Taiwan)">
<span class="description">中文 (臺灣)</span>
Chinese (Taiwan)
</div>
<div class="item" data-percent="79" data-value="fa" data-text="پارسی" data-english="Persian">
<span class="description">پارسی</span>
Persian
</div>
<div class="item" data-percent="41" data-value="fr" data-text="Français" data-english="French">
<span class="description">Français</span>
French
</div>
<div class="item" data-percent="37" data-value="el" data-text="ελληνικά" data-english="Greek">
<span class="description">ελληνικά</span>
Greek
</div>
<div class="item" data-percent="37" data-value="ru" data-text="Русский" data-english="Russian">
<span class="description">Русский</span>
Russian
</div>
<div class="item" data-percent="36" data-value="de" data-text="Deutsch" data-english="German">
<span class="description">Deutsch</span>
German
</div>
<div class="item" data-percent="23" data-value="it" data-text="Italiano" data-english="Italian">
<span class="description">Italiano</span>
Italian
</div>
<div class="item" data-percent="21" data-value="nl" data-text="Nederlands" data-english="Dutch">
<span class="description">Nederlands</span>
Dutch
</div>
<div class="item" data-percent="19" data-value="pt_BR" data-text="Português(BR)" data-english="Portuguese">
<span class="description">Português(BR)</span>
Portuguese
</div>
<div class="item" data-percent="17" data-value="id" data-text="Indonesian" data-english="Indonesian">
<span class="description">Indonesian</span>
Indonesian
</div>
<div class="item" data-percent="12" data-value="lt" data-text="Lietuvių" data-english="Lithuanian">
<span class="description">Lietuvių</span>
Lithuanian
</div>
<div class="item" data-percent="11" data-value="tr" data-text="Türkçe" data-english="Turkish">
<span class="description">Türkçe</span>
Turkish
</div>
<div class="item" data-percent="10" data-value="kr" data-text="한국어" data-english="Korean">
<span class="description">한국어</span>
Korean
</div>
<div class="item" data-percent="7" data-value="ar" data-text="العربية" data-english="Arabic">
<span class="description">العربية</span>
Arabic
</div>
<div class="item" data-percent="6" data-value="hu" data-text="Magyar" data-english="Hungarian">
<span class="description">Magyar</span>
Hungarian
</div>
<div class="item" data-percent="6" data-value="vi" data-text="tiếng Việt" data-english="Vietnamese">
<span class="description">tiếng Việt</span>
Vietnamese
</div>
<div class="item" data-percent="5" data-value="sv" data-text="svenska" data-english="Swedish">
<span class="description">svenska</span>
Swedish
</div>
<div class="item" data-precent="4" data-value="pl" data-text="polski" data-english="Polish">
<span class="description">polski</span>
Polish
</div>
<div class="item" data-percent="6" data-value="ja" data-text="日本語" data-english="Japanese">
<span class="description">日本語</span>
Japanese
</div>
<div class="item" data-percent="0" data-value="ro" data-text="românește" data-english="Romanian">
<span class="description">românește</span>
Romanian
</div>
</div>
</div>
</div>
</div>
<div class="ui floating dropdown theme basic button" data-element="segment" data-type="element">
<span class="text">2 Themes</span>
<div class="menu transition hidden">
<div class="item" data-value="default" data-text="default Theme">Default</div>
<div class="item" data-value="GitHub" data-text="GitHub Theme">GitHub</div>
</div>
</div>
<div class="ui download primary button">
Download
</div>
<div class="ui flowing download basic popup">
<div class="ui divided equal width relaxed center aligned choice grid">
<div class="framework column">
<h4 class="ui center aligned header">UI Framework</h4>
<div class="ui list">
<div class="item"><i class="green check icon"></i> Themable</div>
<div class="item"><i class="green check icon"></i> Build Tools</div>
</div>
<div class="ui primary fluid button">Choose</div>
</div>
<div class="standalone column">
<h4 class="ui center aligned header">Standalone</h4>
<div class="ui list">
<div class="item">Default Theme</div>
<div class="item">Precompiled</div>
</div>
<div class="ui fluid button basic">Choose</div>
</div>
</div>
<div class="ui divided equal height relaxed center aligned framework grid">
<div class="column">
<div class="ui header">Semantic UI</div>
<a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
Download ZIP
</a>
<a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
<h4 class="ui header">Package Managers</h4>
<div class="ui form">
<div class="field">
<label>NPM</label>
<div class="ui fluid input">
<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
</div>
</div>
<div class="field">
<label>Git</label>
<div class="ui fluid input">
<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
</div>
</div>
</div>
</div>
</div>
<div class="ui divided equal height relaxed center aligned standalone grid">
<div class="column">
<div class="ui header">Standalone Segment</div>
<a class="ui primary button" href="https://github.com/Semantic-Org/UI-Segment/archive/master.zip">
Download ZIP
</a>
<a class="ui button" href="https://github.com/Semantic-Org/UI-Segment/">
View GitHub
</a>
<h4 class="ui header">Package Managers</h4>
<div class="ui form">
<div class="field">
<label>Bower</label>
<div class="ui fluid input">
<input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-segment">
</div>
</div>
<div class="field">
<label>NPM</label>
<div class="ui fluid input">
<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-segment">
</div>
</div>
<div class="field">
<label>Git</label>
<div class="ui fluid input">
<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Segment.git">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="advertisement">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
</div>
</div>
</div>
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/segment.less" />
<div class="main ui container">
<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">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</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" data-class="tall stacked, stacked">
<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>
<div class="another example">
<div class="ui tall 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>
<div class="piled example">
<h4 class="ui header">Piled</h4>
<p>A segment can be formatted to look like a pile of pages</p>
<div class="ui ignored warning message">
Piled segments use <b>negative z-index</b> to format the additional pages below the segment. In order for them to appear correctly, your segment's offset container must have a z-index declared.
</div>
<div class="ui piled segment">
<h4 class="ui header">A header</h4>
<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">Vertical Segment</h4>
<p>A vertical segment formats content to be aligned as part of a vertical group</p>
<div class="ui vertical segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui vertical segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui vertical segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
<h2 class="ui dividing header">Groups</h2>
<div class="example" data-class="segments">
<h4 class="ui header">Segments</h4>
<p>A group of segments can be formatted to appear together</p>
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="another example">
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui red segment">
<p>Middle</p>
</div>
<div class="ui blue segment">
<p>Middle</p>
</div>
<div class="ui green segment">
<p>Middle</p>
</div>
<div class="ui yellow segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="another example">
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui secondary segment">
<p>Secondary Content</p>
</div>
</div>
</div>
<div class="example" data-use-content="true" data-class="segments">
<h4 class="ui header">Nested Segments</h4>
<p>A group of segments can be nested in another group of segments</p>
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segments">
<div class="ui segment">
<p>Nested Top</p>
</div>
<div class="ui segment">
<p>Nested Middle</p>
</div>
<div class="ui segment">
<p>Nested Bottom</p>
</div>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui horizontal segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Horizontal Segments</h4>
<p>A segment group can appear horizontally</p>
<div class="ui horizontal segments">
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Raised Segments</h4>
<p>A group of segments can be raised</p>
<div class="ui raised segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Stacked Segments</h4>
<p>A group of segments can be stacked</p>
<div class="ui stacked segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="piled example">
<h4 class="ui header">Piled Segments</h4>
<p>A group of segments can be piled</p>
<div class="ui piled segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</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</p>
<div class="ui disabled segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
<div class="example">
<h4 class="ui header">Loading</h4>
<p>A segment may show its content is being loaded</p>
<div class="ui loading segment">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</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">Attached</h4>
<p>A segment can be attached to other content on a page</p>
<div class="ui ignored info message">
<p>Attached segments are designed to be used with other <code>attached</code> variations like <a href="/header.html#attached">attached header</a> or <a href="/collections/message.html#attached">attached messages</a>.</p>
</div>
<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 class="another example">
<h5 class="ui top attached header">
Dogs
</h5>
<div class="ui attached segment">
<p>Dogs are one type of animal</p>
</div>
<h5 class="ui attached header">
Cats
</h5>
<div class="ui attached segment">
<p>Cats are thought of as being related to dogs, but only humans think this.</p>
</div>
<h5 class="ui attached header">
Lions
</h5>
<div class="ui attached segment">
<p>Humans don't think of lions as being like cats, but they are.</p>
</div>
<div class="ui bottom attached warning message">
<i class="warning icon"></i>
You've reached the end of this content segment!
</div>
</div>
<div class="example">
<h4 class="ui header">Padded</h4>
<p>A segment can increase its padding</p>
<div class="ui padded segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
<div class="another example">
<div class="ui very padded segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
<div class="example">
<h4 class="ui header">Compact</h4>
<p>A segment may take up only as much space as is necessary</p>
<div class="ui compact segment">
<p>Pellentesque habitant morbi</p>
</div>
</div>
<div class="another example">
<div class="ui compact segments">
<div class="ui segment">
<p>Pellentesque habitant morbi</p>
</div>
<div class="ui segment">
<p>Pellentesque habitant morbi</p>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Colored</h4>
<p>A segment can be colored</p>
<div class="ui red segment">Red</div>
<div class="ui orange segment">Orange</div>
<div class="ui yellow segment">Yellow</div>
<div class="ui olive segment">Olive</div>
<div class="ui green segment">Green</div>
<div class="ui teal segment">Teal</div>
<div class="ui blue segment">Blue</div>
<div class="ui violet segment">Violet</div>
<div class="ui purple segment">Purple</div>
<div class="ui pink segment">Pink</div>
<div class="ui brown segment">Brown</div>
<div class="ui grey segment">Grey</div>
<div class="ui black segment">Black</div>
</div>
<div class="another example">
<p>These colors can be inverted</p>
<div class="ui red inverted segment">Red</div>
<div class="ui orange inverted segment">Orange</div>
<div class="ui yellow inverted segment">Yellow</div>
<div class="ui olive inverted segment">Olive</div>
<div class="ui green inverted segment">Green</div>
<div class="ui teal inverted segment">Teal</div>
<div class="ui blue inverted segment">Blue</div>
<div class="ui violet inverted segment">Violet</div>
<div class="ui purple inverted segment">Purple</div>
<div class="ui pink inverted segment">Pink</div>
<div class="ui brown inverted segment">Brown</div>
<div class="ui grey inverted segment">Grey</div>
<div class="ui black inverted segment">Black</div>
</div>
<div class="example">
<h4 class="ui header">Emphasis</h4>
<p>A segment can be formatted to appear more or less noticeable</p>
<div class="ui 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 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 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="example">
<h4 class="ui header">Circular</h4>
<p>A segment can be circular</p>
<div class="ui ignored info message">A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content</div>
<div class="ui circular segment">
<h2 class="ui header">
Buy Now
<div class="sub header">$10.99</div>
</h2>
</div>
<div class="ui inverted circular segment">
<h2 class="ui inverted header">
Buy Now
<div class="sub header">$10.99</div>
</h2>
</div>
</div>
<div class="example">
<h4 class="ui header">
Clearing
<span class="ui teal label">New</span>
</h4>
<p>A segment can clear floated content</p>
<div class="ui clearing segment">
<div class="ui right floated button">Floated</div>
</div>
</div>
<div class="clearing example">
<h4 class="ui header">Floated</h4>
<p>A segment can appear 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="clearing example">
<h4 class="ui header">Text Alignment</h4>
<p>A segment can 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>
</div>
</div>
<div class="ui black inverted vertical footer segment">
<div class="ui center aligned container">
<div class="ui stackable inverted grid">
<div class="three wide column">
<h4 class="ui inverted header">Community</h4>
<div class="ui inverted link list">
<a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
<a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
<a class="item" href="/cla.html" target="_blank">CLA</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Network</h4>
<div class="ui inverted link list">
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
<a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
<a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
</div>
</div>
<!-- <div class="three wide column">
<h4 class="ui inverted header">Learn</h4>
<div class="ui inverted link list">
<a href="#" class="disabled item">Example Layouts</a>
<a href="#" class="disabled item">The Project</a>
<a href="#" class="disabled item">Roadmap</a>
<a href="#" class="disabled item">About the Author</a>
</div>
</div> -->
<div class="seven wide right floated column">
<h4 class="ui inverted teal header">Help Preserve This Project</h4>
<p> Support for the continued development of Semantic UI comes directly from the community.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
<button type="submit" class="ui large teal button">Donate Today</button>
</form>
</div>
</div>
<div class="ui inverted section divider"></div>
<img src="/images/logo.png" class="ui centered mini image">
<div class="ui horizontal inverted small divided link list">
<a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
</div>
</div>
</div>
</div>
<div class="ui basic language modal">
<i class="close icon"></i>
<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
<div class="image content">
<div class="middle aligned image">
<i class="world icon"></i>
</div>
<div class="description">
<p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
<div class="ui inverted indicating progress">
<div class="bar"></div>
</div>
<p>We need your help to make Semantic available to people who speak your language.</p>
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
</p>
</div>
</div>
<div class="actions">
<div class="ui inverted cancel button">No Thanks</div>
<a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
<i class="mail icon"></i>
Help Translate
</a>
</div>
</div>
<div class="ui basic chinese modal">
<i class="close icon"></i>
<div class="header">Would you like to visit the mirror site?</div>
<div class="image content">
<div class="middle aligned image">
<i class="question icon"></i>
</div>
<div class="description">
<p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
</p>
</div>
</div>
<div class="actions">
<div class="ui inverted red cancel button">No Thanks</div>
<a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
<i class="mail icon"></i>
Yes, take me to the mirror
</a>
</div>
</div>
<div class="ui demo page dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted icon header">
<i class="mail icon"></i>
Dimmer Message
<div class="sub header">Dimmer sub-header</div>
</h2>
</div>
</div>
</div>
<script>
window.less = {
async : true,
environment : 'production',
fileAsync : false,
onReady : false,
useFileCache : true
};
</script>
<script src="/javascript/library/less.min.js"></script>
</body>
</html>