LUMEN
Menu
A segment of content
Magni voluptates ullam. Dolor itaque nemo quidem nostrum. Voluptatem vel non quia sed sint ab.
<div class="ui segment">
<p>Perferendis et earum. Autem illo et est similique harum aut. Qui veritatis qui reprehenderit voluptate porro. Ut et reiciendis magni.</p>
</div>A segment may be formatted to raise above the page.
Consequuntur non ab non deleniti odit. Voluptatibus deserunt consequatur nisi deleniti. Mollitia porro nesciunt vitae autem repellat.
<div class="ui raised segment">
<p>Voluptatem velit aperiam esse occaecati tenetur iure tempora. Est culpa voluptates consequatur. Velit aut tempore numquam quam fugit debitis aut. Dolorem illum est. Voluptatem repellat omnis.</p>
</div>A segment can be formatted to show it contains multiple pages
Voluptatem tempore molestiae quibusdam. Dicta eveniet sunt aliquam nam facilis atque vel. Quod et esse quam.
<div class="ui stacked segment">
<p>Et voluptas rerum aut iusto. Rerum facere earum odio et unde. Velit sit non aliquam quas atque.</p>
</div>Ratione laboriosam autem accusamus commodi ipsum. Voluptatum culpa quaerat. Voluptas nihil dolorem dolore.
<div class="ui tall stacked segment">
<p>Dignissimos voluptas voluptas dolorem facilis. Totam quia repellendus ut inventore eaque quas. Ad vero adipisci sit quia eum inventore quibusdam. Error quam excepturi sit optio qui rem.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Quia maxime quo et numquam. Earum enim quod ut. Nisi non fuga doloribus illum expedita. Minima officia amet id molestias veniam et iusto. Odit autem fuga.
Aut quia amet ut. Voluptas et omnis. Aut quo vel vero non quia voluptas. Voluptatem id nisi et itaque error dolores.
Molestias consequuntur ut accusantium quam dolorem. Velit possimus dolore magni modi saepe. Quia non rerum impedit ea quasi.
<div class="ui vertical segment">
<p>Et molestias et sapiente. Autem nostrum ducimus. Consequatur commodi eveniet et. A sapiente dolores. Est qui sint sed.</p>
</div>
<div class="ui vertical segment">
<p>Tenetur eos amet. Ad cupiditate ut voluptates vitae illum. Exercitationem quia architecto qui repellendus tenetur quidem commodi.</p>
</div>
<div class="ui vertical segment">
<p>Qui commodi voluptate esse. Numquam quis pariatur ad corrupti distinctio voluptatem. Vel autem ab eos in dolorem assumenda vitae. Sequi occaecati omnis pariatur nihil.</p>
</div>A group of segments can be formatted to appear together
Top
Middle
Middle
Middle
Bottom
<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>Top
Middle
Middle
Middle
Bottom
<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>Top
Secondary Content
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui secondary segment">
<p>Secondary Content</p>
</div>
</div>A group of segments can be nested in another group of segments
Top
Nested Top
Nested Middle
Nested Bottom
Middle
Top
Middle
Bottom
Bottom
<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>A segment group can appear horizontally
Omnis dolorum et nulla et est animi. Delectus deleniti eligendi. Enim voluptas provident aperiam molestias optio quia et.
Quae magni porro velit. Numquam sequi velit debitis voluptas ut nisi. Fugiat ex consequatur quibusdam id. Ut et qui nulla perferendis qui doloribus.
Et doloribus nisi molestiae et. Cupiditate et et non facere maiores sint. Nam sequi et placeat nemo qui. Quos rerum repudiandae id debitis aut.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Quo sit accusamus quod voluptates nemo sunt voluptate. Ipsa non eum consequatur. Perspiciatis et amet fuga occaecati iure adipisci. Officia nesciunt omnis dignissimos quam quisquam saepe quia.</p>
</div>
<div class="ui segment">
<p>Quia dolor et saepe aut sunt sequi quos. Unde eaque ipsam sed quidem qui. Accusamus molestias recusandae est perspiciatis.</p>
</div>
<div class="ui segment">
<p>Ad accusamus eos consequuntur est aliquid nulla fuga. Ut qui velit repellat et veritatis distinctio. Doloremque autem exercitationem doloribus voluptatibus quibusdam laudantium. Ut ullam sed esse inventore omnis assumenda. Odit fuga maxime iusto possimus expedita.</p>
</div>
</div>A group of segments can be raised
Top
Middle
Bottom
<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>A group of segments can be stacked
Top
Middle
Bottom
<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>A segment may show its content is disabled
Eum animi ea quis. Eum et tenetur. Consequatur iure facilis molestiae esse accusantium delectus sapiente. Et occaecati molestias earum aspernatur vel vel nostrum. Maiores assumenda aut.
<div class="ui disabled segment">
<p>Voluptatem a aut. Maiores doloremque nesciunt praesentium. Minima aut et amet facere aut cum quasi. Doloremque voluptate ducimus et reiciendis.</p>
</div>A segment may show its content is loading
Harum est repellendus et. Mollitia rerum qui et ipsa modi quasi illo. Sed eum harum amet dolores iste magni. Ratione est voluptatem voluptatem autem accusamus.
Placeat qui voluptate optio doloremque. Dolores aut tempora blanditiis sit eos. Qui reiciendis consequatur qui quaerat. Voluptates vel ipsum voluptatem nihil dolor illum dignissimos.
<div class="ui loading segment">
<p>Est quae officiis a quisquam fugiat nostrum. Libero tempore autem ullam. Ullam nihil eum nisi aperiam reiciendis distinctio. Repudiandae voluptates tempora reiciendis excepturi hic nam.</p>
<p>Voluptatum incidunt ratione sequi aliquam. Nam tempore et sit recusandae eaque eveniet ut. Est earum assumenda nisi. Aut necessitatibus eos voluptatem asperiores autem.</p>
</div>A segment can have its colors inverted for contrast
I'm here to tell you something, and you will probably read me first.
<div class="ui inverted segment">
<p>I'm here to tell you something, and you will probably read me first.</p>
</div>A segment can increase its padding
Sit culpa dolores sint voluptas qui maxime maiores. Quaerat maxime possimus tenetur. Consequatur sunt corporis placeat.
<div class="ui padded segment">
<p>Enim quia officiis id et voluptas esse. Saepe at quibusdam tenetur autem facere rerum placeat. Ullam dolor magnam et qui. Enim recusandae quod voluptas unde.</p>
</div>Asperiores error delectus. Et reprehenderit a. Sequi veniam magni eos doloribus id amet eum. Voluptatem eveniet saepe suscipit qui. Sed vitae eaque tenetur eos.
<div class="ui very padded segment">
<p>Quis quos debitis aliquid magni esse quia repellendus. Enim quidem velit iste nihil molestiae perferendis voluptas. Vel sunt qui aspernatur. Nisi beatae ut odit est ducimus.</p>
</div>A segment may take up only as much space as is necessary
Pellentesque habitant morbi
<div class="ui compact segment">
<p>Pellentesque habitant morbi</p>
</div>Pellentesque habitant morbi
Pellentesque habitant morbi
<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>A segment can be colored
<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>These colors can be inverted
<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>A segment can be formatted to appear more or less noticeable
I'm here to tell you something, and you will probably read me first.
I am pretty noticeable but you might check out other content before you look at me.
If you notice me you must be looking very hard.
<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>Inverted colors can also be Emphasised
I'm here to tell you something, and you will probably read me first.
I am pretty noticeable but you might check out other content before you look at me.
If you notice me you must be looking very hard.
<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>I'm here to tell you something, and you will probably read me first.
I am pretty noticeable but you might check out other content before you look at me.
If you notice me you must be looking very hard.
<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>A segment can have its text aligned to a side
<div class="ui right aligned segment">
Right
</div>
<div class="ui left aligned segment">
Left
</div>
<div class="ui center aligned segment">
Center
</div>A basic segment has no special formatting
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.
<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>