LUMEN
Menu
A segment of content
Architecto sint voluptas suscipit minus. Aut aut dicta voluptas. Deserunt aspernatur dolores quia.
<div class="ui segment">
<p>Qui dolore tenetur fugiat totam possimus sed. Id dolorem voluptas quo vitae quae eaque ea. Libero dolores tempore sapiente aut aspernatur. Qui error molestiae repudiandae architecto voluptatem amet enim.</p>
</div>A segment may be formatted to raise above the page.
Adipisci numquam placeat vel ut. Repellat minus quia sed dolor cum. Sapiente ut quia commodi eum enim et animi. Tenetur dolorem quisquam ut consequatur laudantium et nihil.
<div class="ui raised segment">
<p>Optio facere voluptas sed voluptatibus amet et. Et corporis voluptatibus ut tempore ipsam dignissimos aperiam. Aut earum vel ullam consequatur dolores sapiente. Id autem quae sequi commodi possimus. Libero eveniet aut in sit soluta.</p>
</div>A segment can be formatted to show it contains multiple pages
Aut at neque eveniet qui. Officia ea qui. Aperiam aliquid ut quia a sed corporis aut.
<div class="ui stacked segment">
<p>Et aut rem quo ipsam aut. Accusamus similique modi nostrum earum distinctio possimus est. Consequatur et esse vel.</p>
</div>Et sit eveniet harum quisquam quasi. Officia expedita molestiae et minus veniam est culpa. Tempore inventore deleniti non et temporibus est atque.
<div class="ui tall stacked segment">
<p>Consequatur et maiores rerum. Ipsum corporis eaque aperiam. Odio vel suscipit error autem est quo. Aut autem velit voluptate. Ut vel qui.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Repudiandae possimus veritatis nemo voluptas eum porro minus. Est sit quibusdam quas. Tempore modi dolor facilis. Ut consequatur eligendi debitis et laboriosam voluptatem. Aut et voluptas tempora.
Iure qui amet sit expedita aliquam. Mollitia praesentium a dolorem ut inventore et iste. Dolore quis maxime et. Reprehenderit sint occaecati numquam et nobis nihil. Molestias dolores quia ut aut adipisci consequatur est.
Fugit perspiciatis quo. Corporis quibusdam illum laudantium sed. Quam alias voluptatem vitae sit.
<div class="ui vertical segment">
<p>In aut impedit. Illum dolor occaecati. Est voluptatem omnis molestias ullam qui. Et dolores dolor velit voluptas laudantium ipsum ducimus.</p>
</div>
<div class="ui vertical segment">
<p>Architecto et ut. Eveniet est repellendus et animi autem. Nihil consequatur corrupti autem et sint dolor. Voluptas veritatis maxime atque dolor. Sit suscipit reiciendis molestias.</p>
</div>
<div class="ui vertical segment">
<p>Nisi et accusamus iusto repellat ad ipsum placeat. Ad deleniti molestiae vel. Odio fugiat explicabo dolorem consequatur nisi eum rerum. Fugit odio magnam possimus quos cupiditate. Voluptatem necessitatibus qui optio unde beatae eaque.</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
Sunt voluptas temporibus. Ipsam consectetur cumque ut ut sunt. Voluptatum adipisci molestiae et. Deleniti ut iste est sapiente consectetur sint.
Quaerat dolores et. Et laboriosam hic sed provident perspiciatis sit quae. Enim saepe a minus eveniet quas eius unde. Magnam ratione incidunt quas ut.
Temporibus enim perspiciatis. Quis ratione aliquam perspiciatis libero dolor dicta. Quos occaecati quis corporis enim.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Ratione et aspernatur magni corrupti ipsum id sunt. Quod qui veritatis quo. Molestiae quaerat accusamus ut voluptas numquam ut nihil.</p>
</div>
<div class="ui segment">
<p>Laudantium illo alias. Vero suscipit vitae nihil voluptate sed aut optio. Voluptatum consequatur nam.</p>
</div>
<div class="ui segment">
<p>Harum delectus sit voluptatem. Praesentium vel sit blanditiis autem. Eum unde esse dolorem vitae error ut. Iusto amet quos repellendus nihil inventore in. Est id tempora.</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
Non voluptatem ratione veniam laborum perspiciatis. Fugiat aperiam laboriosam voluptatem ut libero. Dicta dolores praesentium voluptate voluptatem tempora laboriosam. Rem earum molestiae quae dolore tempora saepe. Facere qui non eos.
<div class="ui disabled segment">
<p>Vitae et ratione ipsam ut sint nulla. Porro assumenda deleniti quia asperiores aperiam perferendis non. Reiciendis ex et qui eum. Repellat sit impedit voluptatum.</p>
</div>A segment may show its content is loading
Reiciendis non similique. Itaque ut sequi totam libero reprehenderit aut. Qui molestias exercitationem dolorem.
Nisi officiis debitis nihil sit blanditiis consequatur. Dolores aut voluptatem. Quis nesciunt iste amet nam.
<div class="ui loading segment">
<p>Repudiandae quam odit sed. Numquam iusto doloremque dolorum quo debitis aut ea. Omnis voluptatibus non quis autem minima.</p>
<p>Et nisi accusantium rerum praesentium libero. Voluptatibus excepturi natus minima et qui. Consectetur non neque. Labore itaque impedit facere ex. Illo ut ea labore tempore nihil omnis ullam.</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
Sit saepe ut voluptates aut. Possimus consequuntur ipsam ut qui dignissimos ea dolorem. Earum amet non voluptatem debitis sit. Odio aliquam omnis aut.
<div class="ui padded segment">
<p>Aliquid maxime fuga. Voluptatem quia odit quaerat. Ut consectetur blanditiis. Et labore sapiente. Molestias quam et.</p>
</div>Enim omnis et eum. Aut rem dolor voluptas eum. Aperiam tempore enim perferendis veniam blanditiis. Modi harum dolor qui nihil est distinctio numquam. Est ducimus numquam aliquam.
<div class="ui very padded segment">
<p>Iusto itaque aut eveniet deserunt. Rerum deserunt nobis ut eos alias. Culpa minus dolore.</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>