LUMEN
Menu
A segment of content
Eos velit culpa beatae unde corporis. Voluptatem excepturi esse sunt blanditiis. Et consectetur repellat expedita quos molestiae. Vel qui omnis deserunt modi tenetur quia. Sapiente sunt vel quis distinctio ea.
<div class="ui segment">
<p>Ab qui non eos ad. Harum eius recusandae alias dolor. Et nemo quia saepe ipsa dolorem ab accusantium. Nobis sit quia accusamus quia. Accusamus amet aut.</p>
</div>A segment may be formatted to raise above the page.
Corrupti ad consequuntur optio. Rerum asperiores voluptas quo. Ratione magnam fuga molestias reiciendis. Occaecati dolores enim expedita quia quo voluptas.
<div class="ui raised segment">
<p>Et dicta nobis dolor architecto iusto quis. Dolore laboriosam a. Doloribus vel reiciendis sit in et magni.</p>
</div>A segment can be formatted to show it contains multiple pages
Officiis nihil culpa sequi est omnis adipisci. Rerum quod culpa reprehenderit. Quo qui sed delectus pariatur quae. In et aperiam minus quidem voluptatum magni id. Sint nisi provident est magnam autem.
<div class="ui stacked segment">
<p>Enim in delectus rerum et qui. Optio blanditiis sed fugiat nulla reprehenderit. Voluptatem totam fugit. Et at adipisci minima qui voluptates nobis voluptatibus.</p>
</div>Omnis numquam enim et suscipit atque quo soluta. Error optio magnam eaque. Maiores veritatis amet.
<div class="ui tall stacked segment">
<p>Rerum tempore amet sint autem non. Tenetur fugiat totam occaecati sed ut quo et. Consequatur fuga natus voluptatem ducimus.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Libero consequatur porro quis optio. Aliquid temporibus in rem asperiores laudantium et. Similique cupiditate qui omnis voluptatibus nihil eius modi. Sunt tempore qui sed vel. Vitae similique et quas neque.
Ut facere laboriosam natus. Tempora sunt commodi rerum dolor voluptatem. Similique voluptates eos placeat sit. Quibusdam ea accusantium ad temporibus qui iusto quod.
Ut ut alias et consequuntur ut expedita quia. Dolorum est quam facilis aut aliquam quasi quae. Et ut quos ut quo ipsam cum.
<div class="ui vertical segment">
<p>Rerum quam reiciendis. Et sint voluptatibus fuga. Error et qui vel quia. Ut distinctio qui et.</p>
</div>
<div class="ui vertical segment">
<p>Quia sed culpa omnis in qui. Iusto enim mollitia cum eius ipsum repellat. Enim aut soluta. Fugit sint nulla ea voluptas cumque.</p>
</div>
<div class="ui vertical segment">
<p>Error exercitationem quia. Nulla dolore a et temporibus aut sapiente. Autem error vitae recusandae. Dolor et est fugit et. Dolorem qui nihil ad.</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
Omnis a ipsum. Accusantium qui itaque aut. Eveniet id voluptas porro minus voluptatum.
Libero odit qui eveniet animi in tenetur. Nobis aliquid ipsam qui ipsa. Sunt et nesciunt.
Voluptas omnis magni earum amet molestias est consectetur. Qui a praesentium. Ad a ipsam. Distinctio molestias minus. Quod in eos aliquid expedita ipsam minus eveniet.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Quis eaque quia voluptates fugiat voluptatum dolor. Rem dignissimos aut ad perspiciatis quasi. Sunt nihil minus voluptas repellat commodi. Occaecati rem et quia.</p>
</div>
<div class="ui segment">
<p>Sed at praesentium modi. Sunt dolores porro a omnis. Quos enim delectus aut rerum placeat.</p>
</div>
<div class="ui segment">
<p>Ad sed sed vitae voluptatem similique quia et. Fugiat aperiam quis occaecati sint aspernatur qui similique. Voluptatem doloremque quis est hic aperiam.</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
Accusamus sint est consequuntur inventore. Adipisci aspernatur expedita. Expedita numquam ut sit corporis repellat. Consequuntur deserunt dolore totam commodi ea alias fuga. Soluta ipsam eos aut assumenda libero.
<div class="ui disabled segment">
<p>Asperiores veritatis quaerat nobis rerum ut dicta. Id perferendis voluptate dolores non voluptatem dolor. Nostrum quia aut cupiditate alias qui et.</p>
</div>A segment may show its content is loading
Soluta nobis fugiat minus quam provident quo. Nulla maiores odio temporibus id. Officiis consectetur ipsum placeat asperiores aut.
Necessitatibus reiciendis reprehenderit quod. Maiores id consequuntur ducimus molestiae sit. Omnis incidunt explicabo tenetur at dignissimos. Earum aut aut nisi ex delectus. Repellat quis voluptatibus.
<div class="ui loading segment">
<p>Odit sed ex nihil nesciunt in. Dicta et veniam est atque voluptas ut vitae. Temporibus adipisci provident numquam ut et officiis et.</p>
<p>Nemo voluptatem magnam tempore enim commodi quasi repellendus. Vitae harum expedita quibusdam. Dolores sit sequi repellat molestias quisquam.</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
Accusantium nulla dolorem. Deserunt necessitatibus eum. Omnis et sit pariatur. Libero molestiae possimus distinctio recusandae ad amet earum.
<div class="ui padded segment">
<p>Quidem dolorem est corrupti qui facere saepe. Sint quo mollitia consectetur. Dignissimos autem nobis.</p>
</div>Iste et corporis. Odio mollitia reprehenderit minima. Ut reiciendis sit sed ab.
<div class="ui very padded segment">
<p>Est quia qui quia doloribus. Recusandae et enim. Officia eaque qui aut tenetur eveniet.</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>