LUMEN
Menu
A segment of content
Ratione facilis eos aperiam et dolores. Modi et quas eos in. Aut assumenda nihil amet commodi autem. Consequatur magnam quos quod fugiat eos doloremque. Sint totam a cum rerum dolor animi dolorum.
<div class="ui segment">
<p>Laudantium vel maiores ex aliquid dolorum. Magnam deserunt neque consequuntur ut. Consequatur odio fugit quis.</p>
</div>A segment may be formatted to raise above the page.
Inventore aliquam esse. Quia pariatur hic iure fuga. Officiis enim sed aperiam. Sunt quae saepe voluptatem alias.
<div class="ui raised segment">
<p>Ut natus distinctio. Error et dolor sapiente nobis sit laborum quidem. Et accusamus aut.</p>
</div>A segment can be formatted to show it contains multiple pages
Fugiat iusto consequatur. Animi aut eaque. Praesentium aliquam voluptatum ipsam at. Fugiat qui a quas.
<div class="ui stacked segment">
<p>Voluptas non cupiditate. Molestiae quo quia. Architecto modi ut ducimus neque nihil.</p>
</div>At ut nihil atque. Pariatur atque est quia nam. Voluptatum nihil quia similique dolorem.
<div class="ui tall stacked segment">
<p>Ut ratione occaecati aut quod. Consequuntur distinctio sit inventore dolores in. Et consequuntur repellat est iusto vero. Eos blanditiis fugit praesentium nisi velit.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Sint laudantium aut et molestiae impedit dolorum amet. Eos qui voluptatem et non porro aliquid numquam. Distinctio non similique. Labore quis ea iusto aut.
Sed cumque velit. Delectus dicta officia est at. Facere ut at.
Aut voluptas cupiditate odit eveniet quis. Distinctio unde ab odio voluptatem. Earum aut quia in.
<div class="ui vertical segment">
<p>Inventore dolor optio fuga. Soluta odio nisi rerum. Aliquid ut ut similique sed labore minima. Unde et mollitia quasi dicta voluptas.</p>
</div>
<div class="ui vertical segment">
<p>Voluptatum ut aperiam ullam architecto eaque. Reiciendis ea sunt distinctio sed error cum. Dolor debitis rerum labore libero quod velit. Impedit molestias et tempore non qui et.</p>
</div>
<div class="ui vertical segment">
<p>Nisi neque itaque aliquid rerum omnis a ut. Iste illum ratione in. Omnis et ea repudiandae laboriosam dolor facilis.</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
Consectetur fugit nihil aut. A occaecati pariatur. Aliquid temporibus quia corrupti nulla expedita animi.
Nesciunt voluptatem quod. Distinctio voluptas qui consequatur. Dolores id quis sit rerum ad modi.
Est dignissimos excepturi repudiandae consequatur. Rem blanditiis corporis quis et quo. Quia esse tempora reprehenderit omnis molestiae commodi.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Deserunt illum id qui laudantium. Eaque laboriosam sint quis non corrupti ducimus est. Eius laborum tenetur quis et nihil voluptas. Dolor pariatur consequuntur architecto libero debitis. Aliquid et dolorem repudiandae laborum voluptatem.</p>
</div>
<div class="ui segment">
<p>Fugit rerum vel quasi ducimus sit. Nobis nostrum accusantium voluptatibus saepe quae labore. Culpa dolore et voluptatem. Assumenda facilis voluptatem.</p>
</div>
<div class="ui segment">
<p>Sed illo veniam. Nulla minima delectus est eum. Ducimus blanditiis accusamus voluptatum veniam ut architecto adipisci. Error eos sequi non itaque ut.</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
Voluptatibus quaerat consequuntur esse amet excepturi fugiat. Consequatur cumque eius nesciunt itaque illum minus ut. Repellendus amet doloremque.
<div class="ui disabled segment">
<p>Ad assumenda rem adipisci ipsum blanditiis omnis expedita. Est culpa aperiam. Magni quia corporis. Quaerat consequatur odit iure. Ut ea reiciendis ab et.</p>
</div>A segment may show its content is loading
Libero reiciendis quos. Reprehenderit et tempora impedit consequatur voluptatum. Neque doloribus ab sit dicta assumenda. Eos corporis qui molestiae explicabo illum.
Quo dolores qui molestiae amet possimus laborum. Nam omnis nihil voluptatem sint sapiente enim. Doloremque officiis ratione optio porro soluta. Non nulla velit iusto beatae consectetur quisquam eligendi.
<div class="ui loading segment">
<p>Laborum molestiae dolorem dicta unde laboriosam nisi voluptatibus. Laboriosam distinctio exercitationem quia illo. Possimus nihil pariatur dicta repellat asperiores atque aut. Aliquam similique et aperiam dicta. Quia rem natus molestiae.</p>
<p>Ipsum dolores officia ducimus vel eaque. Consequatur qui debitis maiores doloribus officia nihil non. Nostrum dicta voluptatum dignissimos ut molestiae. Quis ex distinctio beatae consequatur optio et. Animi sunt eum possimus et maiores dolorum dolorem.</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
Ut voluptatibus debitis. Molestiae nam et numquam cumque. Aperiam iusto ea et et eum veritatis accusantium.
<div class="ui padded segment">
<p>Nemo assumenda dolor et accusantium magni non odit. Nam dolores omnis earum eius quasi commodi. Quas ratione pariatur blanditiis porro. Temporibus aliquid sunt.</p>
</div>Quia itaque inventore nihil qui facere sequi. Quis fugit ipsam eum sequi. Voluptates corporis dicta voluptatem debitis.
<div class="ui very padded segment">
<p>Libero vel officia. Et molestiae qui nihil possimus alias eligendi sit. Aspernatur assumenda tenetur voluptatem rerum.</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>