LUMEN
Menu
A segment of content
Rerum molestiae molestiae temporibus deleniti. Atque voluptatum repellat laboriosam autem occaecati enim rerum. Fuga voluptates eius accusamus maxime repudiandae repellat. Sequi amet esse.
<div class="ui segment">
<p>Libero temporibus voluptas est. Deleniti nam consequuntur totam quo vel amet. Aut veritatis omnis ipsum. Assumenda aut ducimus. Vero iusto magnam sint.</p>
</div>A segment may be formatted to raise above the page.
Voluptatem placeat ea consectetur fugiat occaecati blanditiis sapiente. Delectus ipsa tenetur quia modi quidem. Cumque illum optio enim qui a repellendus.
<div class="ui raised segment">
<p>Qui deleniti reprehenderit fuga soluta. Aut dolorem eaque fugiat dolores laborum. Beatae nulla veritatis amet.</p>
</div>A segment can be formatted to show it contains multiple pages
Dolorem assumenda adipisci minus. Velit omnis expedita illo aspernatur veritatis sint rerum. Dignissimos aliquam ut ratione qui velit consequatur nostrum. Officia fuga minima qui ut praesentium.
<div class="ui stacked segment">
<p>Non quis ut nam ut. Praesentium quia consectetur doloremque modi. Dolor nostrum commodi quos assumenda quia eum. Vitae molestias voluptas qui ad. Eos beatae at mollitia aut similique inventore autem.</p>
</div>Ut qui beatae. Quibusdam vel aperiam et occaecati accusantium nemo. Illo non laboriosam expedita molestiae alias. Sapiente at totam.
<div class="ui tall stacked segment">
<p>Aperiam omnis voluptatem dolorem. Iusto nostrum cumque in accusamus maxime veniam voluptatibus. Quas incidunt velit autem labore beatae. Quae aut similique.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Quae vel id atque voluptate harum qui. Voluptatem aut similique laborum qui omnis. Veritatis repellat enim corporis. Sed quia ut quis voluptatem.
Earum quo blanditiis magnam non error et nihil. Debitis atque fugit molestiae nihil. Odio assumenda in magnam dolorem.
Rem delectus ipsa. Dolor cum et cupiditate. Et dignissimos rerum. Modi est magnam ut omnis ut. Expedita repellendus enim error eaque.
<div class="ui vertical segment">
<p>Molestiae expedita molestiae aut excepturi mollitia. Rerum sed voluptatem dolorem eum est amet non. Enim totam aut excepturi.</p>
</div>
<div class="ui vertical segment">
<p>Sunt assumenda vel eum molestiae dolores ut qui. Amet mollitia dolorum fugit. Quos enim iure animi. Eum perferendis non iusto cum et incidunt totam. Qui aut modi illo qui vero.</p>
</div>
<div class="ui vertical segment">
<p>Quia vitae sunt qui odit culpa quo. Culpa pariatur ipsam quasi. Consequuntur quas sed fuga voluptate maxime labore. Nesciunt at est. Ea velit quasi aperiam aliquid nesciunt.</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
Ab nulla fugit. Dolores deserunt harum. Rerum aut nesciunt fugit porro tenetur enim et. Voluptates eligendi at unde qui voluptatem molestiae. Vel sapiente illo alias temporibus voluptatum enim.
Et maxime aperiam voluptas laborum molestias praesentium ut. Et illo omnis. Quasi harum est. Mollitia et et doloribus totam maxime. Eum quibusdam eum fugit architecto saepe.
Natus earum dolorem. At molestiae voluptas sint hic nostrum. Est qui corporis necessitatibus. Quaerat velit ratione magnam.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Illo quisquam ex velit voluptas occaecati qui. Cumque labore et nostrum ut modi quam. Ut nulla dolorem accusamus et maxime neque rem. Est provident minus voluptate architecto dicta rem vitae.</p>
</div>
<div class="ui segment">
<p>Deleniti molestias quisquam neque distinctio quo nostrum. Neque molestiae a voluptas non voluptate rerum deleniti. Illo deserunt maiores.</p>
</div>
<div class="ui segment">
<p>Ducimus eum atque nulla hic est quia. Qui nemo voluptates. Dolores eaque fugiat et nesciunt doloremque a dolorem. Voluptas rerum et a dolores laboriosam qui est.</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
Quasi placeat veniam quas rerum vitae neque. Fuga consequatur eos nesciunt ad recusandae ut. Commodi provident mollitia vel architecto nesciunt similique quo. Maxime repellat esse. Rerum aut commodi non laboriosam autem consequatur et.
<div class="ui disabled segment">
<p>Minima ut tempora. Officia nostrum et consectetur hic quia. Debitis voluptates quas autem sit.</p>
</div>A segment may show its content is loading
Aut labore deserunt qui cum et. Quo qui fuga. Quo occaecati ea sunt ipsum impedit at quaerat. In eum ratione vel qui repudiandae. Corrupti perspiciatis laboriosam sunt.
Nesciunt ducimus et commodi ut. Excepturi quaerat laudantium eum. Beatae quia incidunt ratione voluptas.
<div class="ui loading segment">
<p>Tempore facilis quos veritatis ducimus. Consequuntur excepturi ut dignissimos et distinctio quia. Possimus asperiores consequuntur aspernatur. Deleniti necessitatibus perferendis unde nam eum est consequatur. Ad nisi neque et ut dolor.</p>
<p>Molestiae autem illo necessitatibus. Voluptas sed eveniet. Officiis tenetur est aut. Est sapiente rerum illo. Ab eaque dolores quisquam omnis ut excepturi.</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
Id praesentium fuga. Nobis similique ad repellat non suscipit sit. Ut mollitia modi nihil ipsa.
<div class="ui padded segment">
<p>Occaecati consectetur ipsam sint voluptatibus ut eius repellat. Voluptates velit odio non inventore quae quis. Est consequuntur corporis quis atque quo aliquam voluptatem. Eius placeat recusandae incidunt. Aspernatur molestias dolores et.</p>
</div>Tempora molestias et qui. Similique error fugiat sit ex. Aliquid ipsa aliquam veritatis molestiae fuga. Recusandae magni deserunt aliquam aut dolorum.
<div class="ui very padded segment">
<p>Labore et veritatis ut ex. Voluptatem eos debitis. Autem consectetur modi rem qui itaque nihil. Maxime eum ea. Dignissimos impedit eos.</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>