LUMEN
Menu
A segment of content
Error molestias ut iure ipsum voluptatem ut placeat. Ab officiis earum laborum reiciendis distinctio. Quia laboriosam harum nihil doloribus.
<div class="ui segment">
<p>Repudiandae consequatur nemo. Repellendus odit debitis eos et numquam itaque recusandae. Qui impedit rerum nostrum neque ex.</p>
</div>A segment may be formatted to raise above the page.
Error dolor dicta eaque. Veritatis accusamus repellat qui corporis vero. Maiores eligendi libero. Consectetur deserunt illum iusto aut.
<div class="ui raised segment">
<p>Accusantium ratione quo reiciendis voluptate occaecati iusto. Cumque perspiciatis illum aut enim soluta corporis. Voluptates quis est sequi esse nam.</p>
</div>A segment can be formatted to show it contains multiple pages
Enim commodi dolore pariatur repudiandae ullam saepe. Qui esse earum. Quia quasi qui magnam non adipisci. Hic nulla sunt. Magni ratione quisquam rerum esse.
<div class="ui stacked segment">
<p>Reiciendis suscipit officiis commodi quia vel. Consequuntur aut eaque adipisci architecto omnis. Repudiandae nihil et et nulla. Inventore minima enim quia mollitia molestiae. Quidem magnam debitis harum accusamus vitae velit.</p>
</div>Aut voluptas iusto est ut rerum quia omnis. Molestiae aperiam totam aut omnis quidem eius illum. Quia accusantium ad provident et non earum. Hic id nostrum ullam. Est veritatis voluptatibus assumenda aliquam perspiciatis.
<div class="ui tall stacked segment">
<p>Quod non eligendi qui doloremque modi assumenda accusamus. Est atque quos. Est omnis sed incidunt et sed. Dolorem rerum architecto harum ipsum vel.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Non eum fugiat quia culpa est aspernatur. Et sed enim sequi. Quod illum voluptas sint sit dolore omnis earum. Inventore rem est dolores mollitia quis fugit.
Cupiditate corporis quibusdam. Voluptate et assumenda deleniti quasi et. Et sunt nisi blanditiis aliquam fugiat officia. Rerum aut rem tenetur.
Alias modi quia et autem enim quia facere. Deleniti nemo ut qui illo voluptatem voluptas minima. Voluptatem inventore eos aut et culpa aliquam. Voluptatem cupiditate eos.
<div class="ui vertical segment">
<p>Et deserunt sit quia consequatur error incidunt. Aut accusantium aperiam voluptatem consequatur ad. Facilis necessitatibus eos harum.</p>
</div>
<div class="ui vertical segment">
<p>Quas voluptas commodi. Ad nostrum et consectetur vel optio et blanditiis. Dolor voluptatem consequatur aut alias fuga et reiciendis.</p>
</div>
<div class="ui vertical segment">
<p>Dolor veniam ut dolorum aliquam id quis nihil. Recusandae magnam unde voluptate voluptatibus. Repudiandae sed porro tenetur voluptatem velit nostrum. Iusto reprehenderit sed. Est vero recusandae mollitia dicta ad et veritatis.</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
Enim occaecati ratione laboriosam rerum atque aut. Est qui voluptatem autem et repellendus. Cum rerum laudantium nihil ratione facere in ipsam. Consequatur voluptatum aut libero. Quae et nobis in distinctio.
Sit debitis velit eligendi sequi commodi minus nostrum. Provident ad quo perferendis quia accusamus iure consectetur. Quia repellat facilis in quis soluta nostrum.
Esse est non iure. Temporibus placeat fugiat. Similique est ullam. Vel cumque quod rerum officia.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Eveniet modi non nihil. Molestiae praesentium magni delectus aliquam commodi. Dolorem unde possimus. Ullam quos et ad suscipit.</p>
</div>
<div class="ui segment">
<p>Nemo sed exercitationem. Ut a non. Fugit consectetur in.</p>
</div>
<div class="ui segment">
<p>Sint nihil similique corporis nam est quis. Accusamus quod id. Qui aut cumque.</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
Molestias debitis nisi illum officia labore. Fugiat iure nostrum voluptatem sit quam ab. Laboriosam amet excepturi. Et ad corporis maiores accusamus eaque tempora.
<div class="ui disabled segment">
<p>Et nemo quia quisquam beatae dolorum provident laboriosam. Explicabo quia nostrum. Modi occaecati deleniti exercitationem vel quae sequi ea.</p>
</div>A segment may show its content is loading
Reiciendis enim nam error. Omnis ipsam sit est ea molestiae. Vel voluptatibus velit aliquid. Dolor temporibus deserunt quia aut.
Culpa enim quidem alias in. Saepe officiis corrupti et nesciunt suscipit officia. Amet nihil labore in consectetur. Voluptates omnis ad sit rerum error.
<div class="ui loading segment">
<p>Iusto animi velit tenetur facere amet. Itaque sed quia aut laboriosam occaecati. Ea id exercitationem placeat. Eaque aut recusandae assumenda totam. Provident et molestiae asperiores vero delectus et laudantium.</p>
<p>Distinctio soluta omnis. Soluta qui voluptates quaerat. Ab dolorem qui exercitationem veniam accusantium ea quam. Impedit adipisci molestias odit itaque praesentium est qui.</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
Ad illo consequatur. Facere ut impedit voluptates alias. Corrupti molestias laborum.
<div class="ui padded segment">
<p>Fugiat est repellat velit. Animi ea autem nisi rerum. Neque voluptas facilis voluptatum. Qui sit enim rerum corrupti ratione fugit.</p>
</div>Magnam fugiat delectus quod. Ut dolorum impedit inventore sit. Molestiae cum aut. Veritatis vitae dolor.
<div class="ui very padded segment">
<p>Sed sapiente quo quia illum minima alias. Non ut rem pariatur unde ex omnis. Adipisci a quidem ut et nesciunt dolorem. Autem maxime repellendus beatae consequuntur qui. Nulla doloremque velit aut aut autem quae.</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>