LUMEN
Menu
A segment of content
Modi praesentium sint laboriosam eaque. Ullam officiis mollitia assumenda suscipit explicabo. Autem totam recusandae.
<div class="ui segment">
<p>Soluta voluptatibus est. Ut aut est a aut maxime aliquam saepe. Officia eum nihil. Illo velit voluptatum sint dicta.</p>
</div>A segment may be formatted to raise above the page.
Sequi quam quibusdam sunt id. Itaque nam dolore id consectetur. Nisi quisquam porro rerum qui. Et sit consequatur rerum ad dolorem sit.
<div class="ui raised segment">
<p>Veritatis voluptatem beatae cupiditate aut dolor. Qui tenetur adipisci nisi sunt. Qui nam ex error et.</p>
</div>A segment can be formatted to show it contains multiple pages
Enim nemo perspiciatis sint. Quis id rerum accusantium enim. Corporis libero rerum suscipit. Nihil aspernatur cum.
<div class="ui stacked segment">
<p>Repudiandae adipisci deserunt. Quasi sequi debitis ut. Quod dolores sapiente in. Aliquid aliquam quas ut omnis harum.</p>
</div>Suscipit dolor ut sapiente maxime vitae rerum. Quibusdam asperiores ab. Odit voluptatem velit enim id sunt. Nisi illo cumque ut. Aut dignissimos voluptatibus sit mollitia tempore.
<div class="ui tall stacked segment">
<p>A ab explicabo consequatur consequatur. Ea repudiandae iure et culpa ut perspiciatis illo. Expedita quaerat placeat qui laborum voluptatibus molestiae. Cumque ut ut aut dolor rerum quo. Culpa ut beatae consequuntur.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Odit itaque incidunt a soluta qui. Dolore natus sit sit. Facere iure et. Nihil modi nostrum.
Molestiae dolorem ipsam. Sed minima sed. Voluptatem sunt numquam totam architecto quis pariatur. Et deleniti et ullam nobis odit quos accusamus. Enim vitae non quidem quia nihil voluptatem blanditiis.
Fugit hic ullam. Dolore est qui soluta molestiae qui non. Esse quas ut a nam vitae. Occaecati porro sed. Eaque harum nam sed rerum eos eius.
<div class="ui vertical segment">
<p>Nam quo repellat. Distinctio consequuntur hic totam. Sunt accusamus ut voluptates error voluptatem corrupti vel. Non voluptatum maiores possimus reiciendis corporis eaque iste.</p>
</div>
<div class="ui vertical segment">
<p>In modi quisquam. Blanditiis sunt eos et similique provident. Illum repudiandae explicabo. Aut dolorem ea dicta deserunt et et.</p>
</div>
<div class="ui vertical segment">
<p>Dolor repellat atque eum voluptatem. Saepe eaque dolore delectus. Nihil qui provident voluptatem officia corrupti consequuntur soluta.</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
Odit voluptas perspiciatis blanditiis debitis occaecati ad. Sint et laudantium qui nemo sit optio. Tenetur soluta ut. Consequatur qui quo qui et magnam. Rem id soluta rerum harum dicta.
Quis ut explicabo. Est sequi ea dolore unde. Et sapiente error et neque sit. Ut voluptatem ullam. Eveniet itaque earum impedit dolorem esse nulla.
Sapiente reprehenderit animi aperiam nulla aut velit. Nihil recusandae reiciendis molestias repudiandae et facere ab. Aut animi minus error atque officiis quia.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Ut quam maxime commodi accusamus. Minus voluptatem sed dignissimos nobis sed. Accusamus aut magni numquam autem explicabo.</p>
</div>
<div class="ui segment">
<p>Enim nulla nostrum velit similique assumenda fuga excepturi. Unde impedit sequi voluptatibus recusandae voluptas. Fuga sit ad quia nihil qui vel. Unde voluptate adipisci repellendus dicta natus error.</p>
</div>
<div class="ui segment">
<p>Libero perspiciatis quis minus ab tempora. Sit quis earum corrupti doloribus exercitationem. Aut modi placeat. Est explicabo cupiditate quam maxime provident amet ut. Asperiores animi totam voluptas deserunt sunt repudiandae.</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 impedit nihil. Voluptatum molestiae qui necessitatibus accusamus. Veniam in qui et error.
<div class="ui disabled segment">
<p>Fugit totam sunt non. Eius quas necessitatibus accusantium. Ab debitis a officia sunt consequuntur tempora saepe. Minima enim veritatis molestiae id dolores commodi. Dignissimos qui nisi praesentium dolorum.</p>
</div>A segment may show its content is loading
Quis deleniti quas id sed in. Amet mollitia qui. Vel sint voluptas ipsum et minus quo.
Commodi autem porro rem minus dignissimos blanditiis. Sit magnam ab dicta suscipit animi deserunt. Alias nulla suscipit et incidunt reprehenderit aut. Neque ea doloribus labore. Sit quasi iste quis cupiditate laboriosam numquam ipsa.
<div class="ui loading segment">
<p>Porro similique repudiandae et quisquam sunt fugiat rerum. Quod sit dolorem saepe sint. Non laudantium quasi ut rerum cumque voluptatem laborum.</p>
<p>Corporis ipsum voluptatem necessitatibus. Sit eaque dignissimos voluptates earum sunt et quas. Est perferendis quaerat labore. Voluptas vel necessitatibus nihil labore mollitia.</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
Voluptates velit non repellendus impedit. Neque est omnis debitis. Consequuntur incidunt magni ex odit rerum.
<div class="ui padded segment">
<p>Occaecati totam vel animi accusantium sed dolorem. Quia ipsa harum sint voluptatem inventore eveniet. Doloremque natus ducimus. Dolorem odio voluptatibus molestiae inventore ut sit. Sit soluta qui quibusdam et facere sint.</p>
</div>Ut repellat similique qui. Odit quo voluptatum soluta fuga. Provident aspernatur omnis eaque saepe.
<div class="ui very padded segment">
<p>Facilis reiciendis vitae reprehenderit ut. Praesentium ipsum occaecati. Veniam omnis sint sit.</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>