LUMEN
Menu
A segment of content
Officia veniam consequatur nihil dolore voluptatem mollitia. Autem dolores alias et excepturi eum. Ut vero blanditiis non harum. Quia beatae enim similique consequuntur nisi.
<div class="ui segment">
<p>Sed ut natus perferendis repudiandae adipisci. Blanditiis nam similique sequi voluptatem nobis. Dolores cum est sunt laudantium ut. Enim similique est amet numquam provident. Sit cupiditate possimus debitis et.</p>
</div>A segment may be formatted to raise above the page.
Aperiam quis dolor sit molestias necessitatibus fugiat aut. Omnis rerum est dolor. Qui inventore at nihil veniam.
<div class="ui raised segment">
<p>Velit error saepe rerum autem illo aut. Neque velit qui quos eum qui vel. Pariatur aut totam. Qui modi adipisci dicta.</p>
</div>A segment can be formatted to show it contains multiple pages
Qui omnis maiores ea et quis qui. Quas autem odit rem aut non quo qui. Minima eum magni earum.
<div class="ui stacked segment">
<p>Assumenda nobis aut et. Cum repellendus modi. Nulla itaque dolore omnis quod est molestiae. Non aut quam ullam iure nam ut. Accusantium rerum sint architecto quia.</p>
</div>Similique libero ut. Maxime veniam occaecati nulla nemo. Animi nisi aliquid unde repellat quam ea quibusdam. Temporibus dolorem sapiente et labore laudantium eligendi unde.
<div class="ui tall stacked segment">
<p>Nam dolore ducimus dolorem. Qui et voluptas voluptatem iure asperiores sed aliquid. Laudantium iusto quos rerum est suscipit vel. Omnis libero rerum.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Non qui tenetur quidem perspiciatis voluptatem aut voluptas. Qui dolores debitis. Officiis necessitatibus illo quaerat consequatur consectetur.
Assumenda quisquam neque hic autem sint. Maiores id voluptas ipsum perferendis qui. Error ipsa ab maxime et voluptate quas perferendis. Quis explicabo in et.
Eos ducimus aut. Fugit neque sit autem. Molestiae fuga vero facere libero iusto maiores voluptatibus. Sapiente id eos enim amet nostrum. Doloremque consequatur id velit voluptate.
<div class="ui vertical segment">
<p>Et quo qui quaerat nam consequatur. Deserunt aspernatur aliquid sint quas consequatur. Sunt quas consectetur et. Doloribus quo voluptas cum voluptas itaque.</p>
</div>
<div class="ui vertical segment">
<p>Aliquam est optio nobis corrupti dolores. Blanditiis tenetur est beatae veritatis. Accusantium id commodi quis quam repudiandae.</p>
</div>
<div class="ui vertical segment">
<p>Neque alias quas accusamus tempore culpa. Laboriosam dolore quo dolores suscipit. Perferendis sit sunt sit.</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
Voluptatum magnam et minus eos sit. Similique minima ipsum et ex libero et qui. Fugit non ea sint. Iste ea ea non doloremque qui et.
Velit voluptatem consequuntur alias ut error. Quasi omnis omnis autem amet rem repudiandae autem. Sunt sunt officiis voluptatem. Maxime aut quibusdam id est.
Quasi et qui eos totam voluptas. Sunt porro tempora. Voluptatum molestiae ut sed nemo.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Veritatis est autem deleniti dolor molestiae. Assumenda aut dolore aut cum qui aliquid consequatur. Tempore sed omnis quis quam quia. Voluptatem id quaerat fugit earum. Deserunt eum a molestias repellat assumenda.</p>
</div>
<div class="ui segment">
<p>Quia sunt ipsa non officia. Architecto minus quas sint fuga. Fugit est quidem et dolorum. Quam consequuntur id soluta maxime ut sunt.</p>
</div>
<div class="ui segment">
<p>Qui et dolorem esse. Magni neque nisi. Ducimus fugiat omnis reprehenderit dolorem animi rerum. Minus nihil eos esse exercitationem.</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
Doloribus dolor aliquid fuga quo quisquam deleniti. Inventore ab praesentium blanditiis voluptatem facilis. Qui earum sint dolorum odio maxime quos dignissimos. Vero repellendus temporibus earum in et. Voluptatem velit saepe voluptatem possimus.
<div class="ui disabled segment">
<p>Amet vel laudantium corporis. Totam commodi aut. Consequatur dolores et qui sed. Cupiditate nemo assumenda. Omnis ut amet illum rerum.</p>
</div>A segment may show its content is loading
Molestiae qui nisi quia ut itaque omnis sunt. Consequatur rerum inventore vel blanditiis quidem maiores. Ipsam ab tempora voluptas laborum autem quas. Dolores hic quasi cupiditate ut dicta. Vel ea sed velit aperiam.
Architecto id voluptatem libero. Est quis sint repellendus est occaecati ipsam excepturi. Provident dolorum quis modi eius temporibus eum. Sequi ratione aspernatur. Accusantium reiciendis eos vitae rerum quo ducimus voluptas.
<div class="ui loading segment">
<p>Quas soluta cumque non voluptatem atque voluptatibus impedit. Quaerat iste pariatur asperiores. Aut odio voluptates aliquam beatae ut. Ut sit quo amet molestiae nulla. Neque molestiae nobis eveniet animi.</p>
<p>Veniam id quasi. Dolorum dolor quis sunt. Consectetur commodi error id doloribus blanditiis. Minima et voluptatem.</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
Asperiores dolorem tenetur quidem. Cupiditate est et. Ipsam est repellat sed et omnis sed nam.
<div class="ui padded segment">
<p>A eos et et sunt et alias. Atque quos pariatur recusandae dolorem doloremque deleniti. Nihil molestiae aut iure ab est et. Accusamus qui qui in aut.</p>
</div>Adipisci ea quos voluptas atque. Assumenda expedita et voluptatem nobis nemo illo sint. Ut eligendi voluptate veniam illo illum. Ex non consequatur ut et harum pariatur.
<div class="ui very padded segment">
<p>Cumque consectetur non distinctio deleniti hic tempore. Voluptas nemo praesentium a et ut sed. Magni repellat et. Eos qui necessitatibus.</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>