LUMEN
Menu
A segment of content
Quasi explicabo porro et. Qui porro modi et. Culpa et tenetur occaecati nisi velit. Quia enim velit officiis ea. Nostrum ipsam sit quisquam.
<div class="ui segment">
<p>Similique libero quos esse quas corporis. Voluptatum magni voluptas ex nam quo. Dolorum totam asperiores. In autem amet optio nesciunt.</p>
</div>A segment may be formatted to raise above the page.
Voluptas repudiandae pariatur consectetur voluptates commodi. At autem sunt. Natus porro quae ex in aut.
<div class="ui raised segment">
<p>Et velit deleniti repellendus. Quia recusandae at sit dolorem neque corporis rerum. Vel mollitia sunt sint harum.</p>
</div>A segment can be formatted to show it contains multiple pages
Est et vel. Aut dolor incidunt corporis. Fuga rerum repellendus est. Enim odit recusandae quis ea quidem nisi maxime. Expedita molestias nihil fugit omnis officia at.
<div class="ui stacked segment">
<p>Est assumenda blanditiis. Similique voluptatibus est fugiat alias veritatis. Alias tenetur aut veritatis earum maiores aut. Ut tempore est expedita.</p>
</div>Temporibus qui porro. Vel sunt cupiditate debitis error aliquam rem. Culpa vitae ut libero vero cupiditate. Sed aut laboriosam.
<div class="ui tall stacked segment">
<p>Asperiores tempora ea voluptatem iste id quibusdam. Et perspiciatis recusandae laudantium odio eum. Excepturi asperiores est et temporibus doloremque. Excepturi est dicta nihil quis. Vel laudantium aspernatur fugiat.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Dignissimos distinctio aspernatur corrupti cumque. Sequi et quo impedit numquam est autem. Nam a dolore iste quia sapiente adipisci.
Itaque eaque dolores nam praesentium. Et dolores quidem fugit eaque odio. Placeat est adipisci et aut et. Est quo voluptatibus libero consequatur eum aut ut.
Est atque corporis omnis. Explicabo est ipsam vero voluptatem omnis id maxime. Optio sequi vitae. Est nulla ipsa nihil voluptates. Aut qui inventore corrupti.
<div class="ui vertical segment">
<p>Quia est consequatur occaecati recusandae. Velit nostrum est soluta inventore nobis. Et alias amet sed omnis iure sint tempora.</p>
</div>
<div class="ui vertical segment">
<p>Est optio facere dolor iste delectus. Dolor iure veniam. Facere quod iste tempora quidem aliquam. Temporibus nisi sit consequuntur dolor rerum.</p>
</div>
<div class="ui vertical segment">
<p>Ratione perspiciatis numquam dolore est dicta. Ad nostrum ut molestiae ut aut. Deleniti dolor qui rerum accusantium reiciendis quas dolor.</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
Molestiae vitae dolorem voluptatem. In harum mollitia recusandae nobis molestiae non. Earum rerum voluptas. Ut quis voluptatibus et consequatur dolores. Ut labore odio deleniti.
Consequatur quisquam omnis optio vitae asperiores error perspiciatis. Consequatur nisi nulla sit fugiat rem vel. Quaerat expedita nam et quo explicabo accusantium. Velit ut pariatur. Velit rerum est dolorem harum omnis.
Dignissimos temporibus laborum distinctio nihil rerum odit similique. Dignissimos impedit eum libero. Ipsam voluptatibus necessitatibus sit sit quisquam iste possimus. Est sed dolor in et hic.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Sunt pariatur doloribus quis error. Officiis rerum quibusdam officia ad et perspiciatis. Voluptas soluta ex nihil. Molestiae iure labore cupiditate nulla et. Dolorem magni nisi autem quod incidunt iste ratione.</p>
</div>
<div class="ui segment">
<p>Dicta dolores omnis voluptatem dolorum veritatis sapiente. Sit molestiae quia eligendi nam. Mollitia fugit nostrum. Qui velit libero ut ut. Aut nobis quo voluptatem voluptas.</p>
</div>
<div class="ui segment">
<p>Ea minima eaque voluptatem iste. Voluptas delectus minima veniam architecto. Voluptas ut fugit aliquid ad alias labore tenetur. Hic corrupti tempore.</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
In corrupti perferendis recusandae beatae animi voluptatem ut. Ab eveniet dicta. Vitae architecto sint. Voluptatum est est illum eos recusandae. Nesciunt blanditiis harum.
<div class="ui disabled segment">
<p>Ut necessitatibus ex dolor esse qui ut soluta. Atque ut maxime consectetur. Veniam quos ratione illo omnis sint quod.</p>
</div>A segment may show its content is loading
Qui nihil cum incidunt doloribus. Non maiores iusto id et sint. Ut sed eos totam harum vel. Itaque quis consequatur et earum est atque excepturi.
Sint consequatur quam a. Dolore accusantium consequatur animi delectus tempore rerum ad. Necessitatibus rerum et dolorem in ullam.
<div class="ui loading segment">
<p>Aut qui temporibus ut optio. Esse dolorum autem unde a molestias et voluptate. Ea assumenda natus non fugit facilis magnam et. Repellendus minima consequuntur placeat facere.</p>
<p>Dolorem alias similique voluptas reiciendis assumenda sed. Ut commodi neque hic. Ad iure velit provident laudantium. Aut temporibus expedita nam aut.</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
Temporibus delectus ut dolorum sapiente. Laudantium et reprehenderit explicabo expedita earum. Provident et totam voluptas ut sunt. Explicabo ut et illo dolor maiores porro neque. Quam qui autem distinctio veritatis.
<div class="ui padded segment">
<p>Quae eos quasi. Illum eos soluta eaque debitis. Dolorem ut beatae qui. A illo suscipit neque enim.</p>
</div>Quos aut labore molestiae nemo rerum impedit quod. Aut ducimus quia voluptas consectetur. Molestiae illo et praesentium aut. Suscipit sit assumenda quae unde repellendus ipsum illo.
<div class="ui very padded segment">
<p>Autem itaque iste autem. Pariatur culpa porro. Nisi voluptatem doloremque sequi. Et laudantium qui exercitationem ducimus. Nobis dolor harum.</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>