LUMEN
Menu
A segment of content
Saepe aut quo ea provident. Quia aspernatur facere. Inventore id odio voluptatem architecto ex voluptatem. Ut sunt ab voluptas voluptatem.
<div class="ui segment">
<p>Ea est exercitationem repudiandae omnis eligendi officia. Distinctio delectus ex consequatur. Ea quia aut rerum sed omnis labore non. Est et magni saepe ut culpa harum recusandae. Error est delectus soluta facilis est quia dolore.</p>
</div>A segment may be formatted to raise above the page.
Ut eligendi dolorem laboriosam. Suscipit id aliquam soluta sed. Quia earum natus et itaque fugit voluptas.
<div class="ui raised segment">
<p>Velit rerum soluta similique. Illum omnis odio fugiat et. Ut ex ullam aliquid voluptatibus pariatur soluta non.</p>
</div>A segment can be formatted to show it contains multiple pages
Reprehenderit ea perferendis reiciendis magnam temporibus qui iste. Et fuga culpa veritatis ducimus sed amet maxime. Autem perferendis est tempora illo corporis corrupti nobis.
<div class="ui stacked segment">
<p>Ea omnis possimus itaque. Ut ratione dolor labore laudantium. Architecto velit in. Molestiae sit maiores autem.</p>
</div>Numquam facilis occaecati molestiae eius. Iure hic nobis esse quae. Omnis ut impedit tempore cupiditate et. Eos nobis est illo sed et. Vel minus dolore omnis et.
<div class="ui tall stacked segment">
<p>Ducimus ut vitae sed quisquam. Qui et saepe nihil expedita. Ad velit dolorum doloremque omnis voluptates ducimus. Nobis quia maxime ipsam omnis qui. Aut eos occaecati qui deleniti harum provident.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Incidunt sint cupiditate ratione fuga necessitatibus consequuntur suscipit. Et ex sit vel aliquid. Libero cupiditate quo laudantium ab consequatur ut. Et quia eos velit facere voluptatem ipsum atque. Voluptatem doloribus est qui delectus et est beatae.
Excepturi repudiandae minus. Suscipit sint soluta omnis sequi sed odio. Qui in aliquid sit qui laborum. A corporis corrupti id blanditiis deserunt. Tempora nemo nam ut hic labore id deserunt.
Officia provident praesentium voluptates enim voluptate quia. Reiciendis doloribus minus natus animi. Nesciunt iusto at ducimus quo quod et. Ea illum deserunt. Voluptatem aut atque aut velit.
<div class="ui vertical segment">
<p>Esse vel corporis voluptates sunt perferendis facilis sint. Dolorum omnis sint impedit nemo. Sit velit enim nihil.</p>
</div>
<div class="ui vertical segment">
<p>Mollitia recusandae praesentium sit beatae. Quis occaecati nisi. Voluptatibus quis ut.</p>
</div>
<div class="ui vertical segment">
<p>Dolores ipsam totam et ducimus. Id sunt autem. Facilis libero nisi ratione id ea.</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
Quo cum optio modi id. Sed quibusdam ut. Quas similique deserunt.
Enim incidunt commodi ab ex. Suscipit reiciendis commodi ut adipisci consequatur maiores. Qui quas asperiores rerum doloribus aliquam.
Id libero exercitationem animi ut aut. Vitae quasi alias error. Ut sint cupiditate.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Quam esse atque neque eum odit quae harum. Quo voluptatum veritatis magni placeat consequuntur error. Quibusdam reprehenderit sint. Culpa odio est. Rerum enim unde in rerum sed.</p>
</div>
<div class="ui segment">
<p>Fugiat assumenda sunt similique esse tempore. Voluptas odit corporis. Sapiente asperiores magni enim et et et. Et quia ad voluptas nobis ut tempora iusto.</p>
</div>
<div class="ui segment">
<p>Quas aliquid aut dolore velit voluptatem fuga error. Recusandae rerum illo. Omnis earum occaecati dolores sapiente ab nam. Natus neque libero voluptatem.</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
Et voluptas necessitatibus. Pariatur odit similique aut consequuntur quia consequatur tempora. Quis autem nemo reiciendis laudantium incidunt laborum est. Architecto nihil eveniet.
<div class="ui disabled segment">
<p>Sit cupiditate commodi et earum voluptatem. Cum reprehenderit aperiam neque rem nemo. Ex perspiciatis nam reprehenderit.</p>
</div>A segment may show its content is loading
Assumenda impedit dolorum suscipit consequatur. Ipsam nobis voluptatem. Cupiditate ipsum sed sunt voluptas consequatur. Ipsam aut quia laborum aut deserunt. Necessitatibus asperiores ut quaerat ea qui quia rerum.
Sapiente dolores quidem quis qui. Deserunt voluptatem animi quam. Similique quod culpa magnam.
<div class="ui loading segment">
<p>Praesentium adipisci delectus. Sequi animi dolorem inventore omnis. Cupiditate molestiae quis iste. Nesciunt dolores aut esse. Sed illo nesciunt qui qui impedit.</p>
<p>Fuga porro molestiae aut. Voluptas voluptatem praesentium voluptatem voluptates eligendi enim. Cum in in voluptas et.</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
Quia voluptatem omnis voluptatem placeat necessitatibus nihil libero. Ducimus eos quo amet ut molestias architecto ad. Quae cupiditate dignissimos fugit minima accusantium.
<div class="ui padded segment">
<p>Incidunt eaque consequatur quia eveniet vel aut. Iusto et dolores et quo. Impedit molestiae perferendis vero hic aut. Ducimus aliquam dolor non. Officia reiciendis voluptates et non consequatur in.</p>
</div>Dolorum ab dolorem eius voluptatem harum et. Dignissimos commodi in sit qui nihil aut blanditiis. Esse consequatur accusantium repellat a quasi eos ullam.
<div class="ui very padded segment">
<p>Ab voluptatem est et autem ut. Reiciendis nulla placeat ut quas beatae. Ut similique ratione molestiae.</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>