LUMEN
Menu
A segment of content
Fugit praesentium perferendis doloremque ad sit. Quidem officiis quas aut magni laborum et. Quisquam est quas vel dolorum.
<div class="ui segment">
<p>Ut ratione non quod incidunt iste et. Rem maiores aliquid sed distinctio cum magnam assumenda. Praesentium vel laudantium quam.</p>
</div>A segment may be formatted to raise above the page.
At suscipit eum quibusdam omnis corrupti. Earum doloremque rerum iure et est illo. Sint harum in non sequi. Ut quaerat quod eos voluptates.
<div class="ui raised segment">
<p>Est porro et occaecati maxime. Placeat iste tenetur possimus. Deleniti minima iste minus ipsa deserunt autem.</p>
</div>A segment can be formatted to show it contains multiple pages
Nemo dolorem sit maxime laboriosam. Occaecati non exercitationem et odio eveniet. Animi ea aspernatur explicabo exercitationem.
<div class="ui stacked segment">
<p>Similique voluptatem harum quo nihil quaerat enim quis. Aperiam eum et. Non doloremque odio. Ullam blanditiis aut rerum hic.</p>
</div>Quis repellat aut. Quam quia minus dolore est maiores. Velit nisi est asperiores adipisci aliquid. Magnam delectus molestiae reprehenderit saepe.
<div class="ui tall stacked segment">
<p>Illum quia eum et voluptatum a. Debitis dolores eum inventore explicabo voluptas. Doloribus aspernatur est rerum quia ab autem.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Provident nulla sapiente. Consequuntur vel inventore ab. Magni ducimus aliquam. Sed aut id.
Officiis ipsam ut accusamus aliquam rerum quia. Expedita qui non debitis ipsam fugit voluptas id. Asperiores exercitationem et maiores accusamus dolore. Soluta assumenda voluptatem impedit et voluptate. Voluptatem nemo voluptas vero sint accusantium.
Provident magni quod corporis natus commodi repudiandae. Ex accusantium aut sed neque officiis vel. Sit et ipsa ad ut est. Distinctio qui adipisci veniam dolorum tempora. Enim accusantium pariatur.
<div class="ui vertical segment">
<p>Ipsum mollitia quo. Commodi iste distinctio perspiciatis modi. Nesciunt est aut molestias optio.</p>
</div>
<div class="ui vertical segment">
<p>Doloremque quis totam rerum. Tempora sed voluptatem vel dolor. Voluptatibus distinctio quibusdam pariatur rerum. Alias quaerat similique.</p>
</div>
<div class="ui vertical segment">
<p>Placeat nostrum eveniet laudantium. Aut est illum aspernatur. Veniam aut earum cum impedit. Laboriosam in consequatur eius voluptatem beatae voluptatem.</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
Totam ut neque tempora similique assumenda fuga nesciunt. Quibusdam veniam eveniet omnis aut sunt magni. Aut eligendi commodi rerum vitae delectus illum officiis. A omnis velit.
Sed illo et est deserunt autem. Et deleniti eius doloribus porro dolorem. Facere tempore cupiditate similique.
Exercitationem in quia qui. Totam perferendis et et itaque. Laborum voluptatibus sint facere neque officiis expedita.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Qui amet odit impedit aspernatur recusandae. Autem in porro. Recusandae delectus autem ducimus vel non. Corporis sed fugit eaque. Dolor in sapiente qui consectetur ut.</p>
</div>
<div class="ui segment">
<p>Unde sapiente soluta. Adipisci dolor accusantium. Velit non modi. Exercitationem qui alias.</p>
</div>
<div class="ui segment">
<p>Natus et pariatur et ut iste eum officia. Ut non dolores sequi. Sed aliquid est.</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
Repudiandae ipsa qui amet. Natus eum amet sit soluta numquam. Vel in laborum enim quis nesciunt. Rerum dicta pariatur enim tempore aut error.
<div class="ui disabled segment">
<p>Possimus qui ad eum quis voluptas temporibus. Ea voluptatem asperiores ea. Similique cum architecto. Omnis dolore eius minus.</p>
</div>A segment may show its content is loading
Vel enim placeat. Sint recusandae consequuntur adipisci accusantium libero pariatur. Et expedita quia atque beatae voluptatum. Laborum dolores laboriosam perspiciatis. Qui assumenda ullam rerum.
Autem explicabo dignissimos ducimus repellat rerum necessitatibus harum. Voluptate dolor qui possimus odit dolore ut. Molestiae dicta laborum quo recusandae. Non dicta sit optio consequuntur molestias fugiat.
<div class="ui loading segment">
<p>Ut repellendus quis voluptas blanditiis quia ea. Qui eveniet totam. Sit quis doloribus blanditiis ullam est commodi.</p>
<p>Repellendus facilis fuga iure. Temporibus et rerum itaque mollitia magnam sit. Aliquid et quasi at aut quo quos. Rerum quidem veritatis asperiores voluptatem quod.</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
Omnis dolores veritatis laboriosam quaerat eligendi et. In aut ipsa neque nemo nisi est ut. Dolor eum voluptatem qui ut. Sint magnam est earum ratione dignissimos perferendis odit. Voluptatem quas autem totam.
<div class="ui padded segment">
<p>Earum consequuntur molestiae quis sint eveniet. Distinctio explicabo et aut similique non exercitationem voluptas. Impedit ratione nostrum qui vitae consectetur officiis illum. Unde numquam facilis.</p>
</div>Voluptatem sunt voluptas ut ipsam. Rerum molestiae sunt neque voluptas dolores deserunt. Nam possimus voluptas assumenda laudantium. Dignissimos nihil et non deserunt similique est. Eaque ipsam nam consequatur.
<div class="ui very padded segment">
<p>Quo debitis modi labore voluptatem officia amet. Modi vero corporis similique dolores magnam ipsam. Quod perspiciatis rerum vitae. Nobis magni error aspernatur reprehenderit. Debitis voluptas optio consequatur animi rerum aut aut.</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>