LUMEN
Menu
A segment of content
Architecto velit quia ut incidunt. Et a incidunt placeat. Illo natus quos sed. Doloribus eos sed eos maiores et excepturi.
<div class="ui segment">
<p>Ea rerum nulla veniam labore quia fugiat. Fuga praesentium dignissimos officia saepe neque fugiat. Quisquam quasi ratione ab alias non. Sapiente aut sint at illo.</p>
</div>A segment may be formatted to raise above the page.
Sunt eligendi reiciendis. Fugiat quasi et. Totam et nostrum accusamus. Quia aliquam laboriosam error ipsa. Nulla iusto molestiae vel.
<div class="ui raised segment">
<p>Ut fuga qui adipisci molestias ut rem. Aliquam consequatur saepe earum quibusdam. Ullam nam soluta at. Eum tempora corporis in vel aut.</p>
</div>A segment can be formatted to show it contains multiple pages
Quibusdam sunt dolore doloribus quia voluptate. Laboriosam velit libero officiis omnis fuga ratione aliquid. Consequatur natus assumenda sunt. Minima fugit reiciendis quae nulla. Reprehenderit non adipisci cupiditate nisi iusto est sunt.
<div class="ui stacked segment">
<p>Quidem facere adipisci et sint doloremque repellat. Ut odio error eius numquam maxime. Illum aliquam animi. Et quo eos.</p>
</div>Rerum earum voluptatem sed voluptatibus. Distinctio possimus facilis harum. Esse quod pariatur eaque nulla debitis a at. Et magni sint dolor quis rerum.
<div class="ui tall stacked segment">
<p>Animi voluptatem quo non temporibus sed quia. Nesciunt asperiores blanditiis. Dolorum aliquid quia est eum aperiam.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Nostrum impedit quasi. Omnis sit et odit tempora quo. Ut magnam facilis. Voluptas in architecto et cupiditate neque incidunt in. Aperiam dolorem aut non inventore incidunt.
Aperiam voluptas sunt. Sit qui neque ad est. Dolores ex dignissimos. Possimus quia id dicta deleniti.
Aperiam commodi odio quis quia beatae et. Quia voluptatem enim consequuntur quisquam consequatur non a. Quos aut recusandae natus debitis aperiam id. Excepturi nemo consequatur delectus et. Error qui commodi quo quasi ut.
<div class="ui vertical segment">
<p>Earum aperiam dolores delectus. Sed quos aut ratione nemo non. Animi recusandae reprehenderit sed sit.</p>
</div>
<div class="ui vertical segment">
<p>Fugiat ut minima. Dignissimos fugit sint omnis. Reprehenderit asperiores a ut id. Tempore nisi est tenetur assumenda soluta expedita voluptas. Totam consequuntur ab quis facilis enim aut.</p>
</div>
<div class="ui vertical segment">
<p>Saepe reiciendis accusantium dolorem. A quas est quia voluptatem est sint est. Sit accusamus modi odit aliquam voluptas qui quos.</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
Cupiditate aut voluptatem nam labore quas. Voluptate a et dolore consequatur. Vel quos temporibus voluptatem ea et ut quia. Voluptates labore sit est.
Aliquid earum quidem quos qui. Iusto distinctio omnis. Nostrum voluptas itaque.
Nulla ea rerum pariatur harum et fuga placeat. Id sit voluptatem reiciendis cumque. Dolores et et.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Dolor et est consequatur qui quam rerum et. Ab libero distinctio. Qui beatae et nemo. Eum enim cumque rerum.</p>
</div>
<div class="ui segment">
<p>Minima voluptatem in libero. Mollitia perferendis magnam eos et. Molestias ratione velit.</p>
</div>
<div class="ui segment">
<p>Voluptatum necessitatibus vitae placeat nostrum quos culpa a. Quia sint libero. Ea quisquam quis.</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
Corrupti eaque molestiae perspiciatis. Cum et possimus dolore necessitatibus. Enim nobis laborum deleniti.
<div class="ui disabled segment">
<p>Inventore perferendis dolorem. Laboriosam in quia quia saepe dolorum sit. Quidem ratione non id rerum porro.</p>
</div>A segment may show its content is loading
Impedit et vero vel sunt accusamus inventore. Eius impedit consequatur. Aliquid sed dolorum deserunt molestias consequatur.
Ut est totam iste suscipit dolor nostrum dolore. Molestias repudiandae impedit quam. Repudiandae quisquam deserunt ipsa possimus qui ad voluptatum. Repellat vero reiciendis odio consequatur.
<div class="ui loading segment">
<p>Error vel harum porro ut exercitationem. Placeat laborum consequatur. Voluptatum non maiores mollitia dicta. Autem illo rerum magni consequatur iusto adipisci.</p>
<p>Et animi qui. Cupiditate aspernatur a id ipsam et numquam. Labore velit vel ducimus voluptas qui vitae aliquid. Et voluptas dolores necessitatibus velit. Pariatur fugit molestiae esse accusamus.</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
Voluptatem provident voluptatem nobis minus deserunt laudantium. Est exercitationem est. Quibusdam modi fuga molestiae eum necessitatibus consequatur quis. Dolor est corrupti nobis temporibus perferendis ducimus.
<div class="ui padded segment">
<p>Minus in saepe rerum et voluptatum accusantium sapiente. Ipsum est aut exercitationem aperiam. Veniam perspiciatis qui qui voluptatem.</p>
</div>Non quaerat accusantium tenetur magni et aperiam quas. Magnam quo dolores omnis. Est cumque eligendi numquam. Est quisquam vel dolorum ea. Voluptatem sed provident consequatur ad iure.
<div class="ui very padded segment">
<p>Quibusdam quis beatae. Eum expedita eveniet. Aut aliquam dicta harum et consequuntur.</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>