LUMEN
Menu
A segment of content
Excepturi nostrum sint voluptatem quo. Velit blanditiis alias corrupti. Aspernatur voluptatem fugit repudiandae corporis cupiditate tenetur voluptatem. Sit consequuntur odit laborum placeat eos exercitationem et.
<div class="ui segment">
<p>Non consequatur ducimus ut similique. Voluptate incidunt adipisci eveniet optio iste aut. Et consequatur molestias ut assumenda qui nesciunt. Ipsam magni totam earum voluptas.</p>
</div>A segment may be formatted to raise above the page.
Nesciunt voluptates eum ut quisquam debitis doloremque. Asperiores recusandae quia repellat necessitatibus repellendus quae rem. Ullam nulla minus maxime. Ea nesciunt ratione velit error distinctio at quod.
<div class="ui raised segment">
<p>Autem illo necessitatibus. Temporibus quos unde ut incidunt rerum. Voluptas quae voluptatum incidunt. Est magnam exercitationem quis in. Hic facere debitis laboriosam aliquid vel officia.</p>
</div>A segment can be formatted to show it contains multiple pages
Architecto provident sit et. Eum modi esse dolorem consequuntur itaque nihil. Ea ducimus minus expedita praesentium dolorem. Unde praesentium doloribus fugit.
<div class="ui stacked segment">
<p>Provident vel porro voluptatibus quo. Harum quidem sed. Qui aut a quasi voluptas totam similique. Consequatur dicta est itaque qui totam aspernatur et.</p>
</div>Ut vero voluptatem ex sed est et qui. Est repudiandae earum impedit sunt non. Minima voluptate minus sequi.
<div class="ui tall stacked segment">
<p>Et expedita ut voluptatem error nobis sunt praesentium. Maxime aut similique. Voluptatem hic aut molestiae voluptas. Sunt et non aut est unde repellat voluptas.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Nisi a qui est qui rem. Qui laboriosam debitis in molestias dolorum incidunt. Quo distinctio hic et alias incidunt rerum architecto. Fugiat quia perferendis et molestiae.
Aut in debitis eveniet adipisci dolor et. Ut fugiat possimus velit sed. Magni vel hic optio ut.
Ut quos dolorem beatae. Non dolorum enim autem dolore est vel ab. Et nesciunt doloremque similique ut minima. Ut eos consequatur. At molestias a non voluptas rerum nesciunt eum.
<div class="ui vertical segment">
<p>Earum ex fugiat iure. In placeat exercitationem ut consequatur ea expedita consequatur. Unde tempora alias qui.</p>
</div>
<div class="ui vertical segment">
<p>Cum debitis voluptatum qui doloremque totam. Ea iusto impedit sed autem. Sed deleniti ipsum consequatur ut nihil.</p>
</div>
<div class="ui vertical segment">
<p>Sit sunt dolor. Et optio officiis. Fugiat ducimus autem vel dolores et nam tempore. Et ut neque.</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
Culpa numquam unde nulla aut molestias dolorem. Necessitatibus iure accusantium reiciendis ea incidunt. Expedita fugiat eligendi voluptatem vero enim deserunt.
Aspernatur iure dolor voluptatem temporibus. Aliquid consequuntur debitis doloribus vel soluta et iusto. Harum dolores dolor nihil rerum ipsa velit blanditiis. Magnam eum molestiae.
Optio culpa eos. Repudiandae culpa amet. Nemo voluptates aliquid.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Magni nihil autem nobis ducimus sequi ea veritatis. Quaerat praesentium consequatur vel. Eaque quod architecto. Aliquam voluptatum beatae.</p>
</div>
<div class="ui segment">
<p>Eos omnis et rerum voluptatem similique adipisci magni. Velit nam ad amet quis natus. Aut consequatur est magni sunt provident. Aliquam vitae sint qui. Laudantium pariatur quasi consequatur sed.</p>
</div>
<div class="ui segment">
<p>Ad quo sapiente maiores est enim autem. Voluptatem sed quam possimus aspernatur reiciendis voluptatem distinctio. Architecto quia reprehenderit et libero. Esse aut iusto aperiam aspernatur. Natus sint explicabo animi.</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
Voluptas vel vero consequatur in pariatur rerum iure. Quod deserunt facere. Placeat ratione et voluptate dolorem.
<div class="ui disabled segment">
<p>Non ex rerum voluptas suscipit architecto eius aliquam. Iste debitis dolore ullam cumque voluptatem sunt. Mollitia cupiditate rem quis. Aut dolor deleniti facere vel tempora recusandae tempore.</p>
</div>A segment may show its content is loading
Dolor dignissimos expedita at sed possimus omnis earum. Iusto commodi non asperiores beatae consequatur praesentium qui. Tempora blanditiis neque ullam. Quae a quos nobis repudiandae suscipit dolor iste. Quidem ea deleniti et.
Et iusto laudantium voluptates quos qui quia. Aut tempore et quod qui. Commodi sit et dolor ipsa eligendi incidunt perspiciatis. Eos earum ipsam nam atque autem.
<div class="ui loading segment">
<p>Ad similique quia et. Hic itaque ipsa reiciendis libero eaque qui. Ullam vel odio et dolorum ipsa.</p>
<p>Occaecati inventore ut. Consequatur et alias repellendus. Optio aliquid odit libero fugiat velit. Aut omnis sint aut et saepe.</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
Illum veniam ipsa tempore velit. Id illo sunt laboriosam. Delectus quia repudiandae libero similique unde quia eveniet. Amet fugit consequatur autem illum.
<div class="ui padded segment">
<p>Et ut aperiam. Omnis et reprehenderit officiis laborum dignissimos qui. Porro veniam non. Ut dolor asperiores accusamus et sit. Nisi eum dignissimos sint minus ipsam mollitia ex.</p>
</div>Quia quidem voluptatum aliquid sit eum. Doloremque odit est omnis quam officia magni. Et et at sed aliquid.
<div class="ui very padded segment">
<p>Officia quas recusandae voluptatem laboriosam aspernatur sint qui. Architecto minus nisi ab qui ea molestiae quia. Quo facilis enim corporis.</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>