LUMEN
Menu
A segment of content
Ipsum doloremque ut laboriosam sit et ratione. Soluta accusamus qui ullam voluptas dicta aut et. Debitis sunt est veniam ipsa laborum. Et nisi sint minima fugit. Consequatur fugiat consequatur laborum.
<div class="ui segment">
<p>Ab velit rerum placeat. Est eaque tenetur eum corporis. Tempore asperiores voluptatem consectetur et dolorem et.</p>
</div>A segment may be formatted to raise above the page.
Exercitationem ut dolorem et vel itaque eum id. Dicta voluptatem qui. Ut ducimus sunt.
<div class="ui raised segment">
<p>Id quaerat beatae enim vero officia explicabo. Eos in est officia a qui nesciunt. Sequi non dolor totam vitae animi impedit quia. Ut perspiciatis explicabo molestiae suscipit et iure.</p>
</div>A segment can be formatted to show it contains multiple pages
Animi suscipit molestias cumque vitae. Laborum eos excepturi beatae animi est ut qui. Voluptatem quasi eaque recusandae. In eligendi et. Officia quae inventore sit culpa aut.
<div class="ui stacked segment">
<p>Ut sequi nam aut sint corrupti. Minus et perferendis sint earum tempore. Nulla est animi molestiae dolores et corrupti. Quia eos doloribus consequatur voluptas sint sed. Voluptate beatae omnis eos culpa deleniti sint.</p>
</div>Praesentium incidunt labore. Non enim possimus dolor. Possimus voluptate iste voluptas est sequi recusandae. Perspiciatis ducimus nemo vitae voluptatum aut illo a.
<div class="ui tall stacked segment">
<p>Quia aut praesentium et quae perspiciatis. Dolor vero dolorum commodi corporis quis eaque ab. Impedit voluptatibus illo et at harum.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Facilis fuga perferendis ut ipsum voluptas at. Iusto labore est occaecati illo. Distinctio quasi est dolorem laudantium qui quo tenetur.
Placeat nam est necessitatibus ullam ex voluptatum. Sint eius odit id sit. Culpa optio temporibus impedit iure vel. Quis et consectetur eius architecto.
Omnis repellat atque at aperiam porro voluptatum. Iure porro nihil dolorum eos. Ea unde velit sit minima id quod cumque. Et et itaque voluptate quod. Alias hic architecto corrupti perferendis quo magni.
<div class="ui vertical segment">
<p>Quos quasi nostrum consequatur. Incidunt consectetur quod voluptates quo vel odit deserunt. Ratione velit harum iusto. Fuga atque tenetur quia.</p>
</div>
<div class="ui vertical segment">
<p>Distinctio rerum consequatur omnis eos. Pariatur ab soluta. Illo vel temporibus et.</p>
</div>
<div class="ui vertical segment">
<p>Voluptatem quis numquam aut. Sed quia aliquid consequatur aut voluptas. Earum sapiente soluta qui veniam cupiditate ea tenetur.</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
Ipsam consequatur necessitatibus quia. Est aut qui. Alias libero dicta est aut totam ipsam.
Cupiditate qui praesentium nihil sed et. Illum incidunt iure. Ea nihil reprehenderit fuga tenetur enim soluta aliquam.
Rem ut repudiandae quis. Quidem aut consequatur qui numquam. Iste dicta eaque.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Sunt aut tempora provident nihil doloremque reiciendis nemo. Cupiditate totam optio eos voluptate aspernatur. Nihil quo est. Voluptatem quidem eos asperiores.</p>
</div>
<div class="ui segment">
<p>Accusantium numquam aliquam expedita sed pariatur voluptas. Sint sint iusto. Aliquid debitis sequi enim dolor sed. Ut voluptatem repudiandae expedita ut.</p>
</div>
<div class="ui segment">
<p>Quod deleniti consequatur omnis. Omnis aut similique omnis quod quo eligendi blanditiis. Est et est pariatur. Sunt nihil hic.</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
Ea odio omnis totam perspiciatis dignissimos repellendus. Tenetur blanditiis dolores dolores nihil voluptatem. Quo reprehenderit quidem. Non aut in soluta nisi et consectetur eaque. Inventore quia deserunt ea.
<div class="ui disabled segment">
<p>Non ipsum labore sunt. Facere deserunt dolores natus inventore adipisci. Enim fuga omnis. In aut eligendi. Ullam et deserunt voluptas consectetur est commodi et.</p>
</div>A segment may show its content is loading
Est accusamus numquam. A eveniet autem occaecati et vero. Fugiat natus voluptatem rerum fuga numquam perferendis.
Quas qui placeat repellat animi molestiae velit. Aspernatur neque omnis rem modi eligendi qui. Provident est facere facilis.
<div class="ui loading segment">
<p>Et autem et ab repellat. Rerum et ullam. A aut ut. Debitis natus voluptas fugit ratione. Numquam magnam cumque aut quis.</p>
<p>Voluptate suscipit reiciendis facere debitis et quibusdam quae. Iusto soluta commodi dolore corporis ullam ut. Autem architecto hic natus aut dolorem unde minus. Eligendi et aut quis.</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 esse facere mollitia ad. Excepturi eveniet earum laborum ut tempora molestiae. At veniam provident deserunt ad quia illo. Vero est voluptas omnis. Ea possimus fugiat nostrum impedit quia in enim.
<div class="ui padded segment">
<p>Reprehenderit unde voluptatem corrupti. Nihil odit neque modi. A hic sequi. Quod voluptatem soluta ex voluptatem qui repellat ut.</p>
</div>Enim quos enim minima minus eveniet accusantium quidem. Eos mollitia sapiente iure. Ducimus quo et. Pariatur atque velit fugiat.
<div class="ui very padded segment">
<p>Facere odio modi. Et quo dicta et deleniti labore. Qui est quis officia ipsam quo. Modi numquam rerum iusto et. Et molestiae cupiditate in repellat cum.</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>