LUMEN
Menu
A segment of content
Fugit perferendis reprehenderit delectus. Aliquam dolor molestiae fugiat eum distinctio dignissimos enim. Ullam eum consequatur aut aut est et.
<div class="ui segment">
<p>Et perspiciatis ut magnam rerum facere quaerat incidunt. Ratione blanditiis enim perferendis provident neque dolor. Culpa placeat sit. Id consequatur fuga et illo dolorem doloribus. Excepturi praesentium ut voluptatibus facilis quasi in.</p>
</div>A segment may be formatted to raise above the page.
Quia et voluptas voluptatem dolorem. Porro veniam nihil inventore. Vel quo cupiditate autem et.
<div class="ui raised segment">
<p>Eum dolor molestiae et quas. Ut a voluptatem. Nobis excepturi consectetur dignissimos occaecati quasi aut adipisci. In quia laborum iure eaque quidem. Consequatur officiis fugit.</p>
</div>A segment can be formatted to show it contains multiple pages
Velit magnam dolores omnis at quasi. Aliquid fugiat quos illum quis non consequatur excepturi. Autem ipsum aspernatur aut ut tempore.
<div class="ui stacked segment">
<p>Non id sit iusto et quisquam eaque. Rerum est quae modi ut. Ut sed cupiditate eaque et consectetur.</p>
</div>Suscipit sint corporis aliquid est eos ratione nemo. Sapiente voluptates quia at non laudantium nisi dicta. Et cupiditate deserunt tenetur. Omnis est ut aspernatur. Est est ullam deserunt nesciunt enim.
<div class="ui tall stacked segment">
<p>Temporibus maiores rem non officia repellendus est perferendis. Ipsum eligendi eum error necessitatibus et id eveniet. Iusto sed nostrum saepe et. Totam aliquid quo nemo. Dolorem quis nisi porro qui itaque.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Aut ipsam ea perferendis. Consequatur omnis exercitationem impedit repellat. Quia consectetur numquam. Expedita molestias hic incidunt dolore. Qui sed quaerat velit reprehenderit et quod.
Cum omnis ut alias corrupti ea assumenda. Laboriosam culpa voluptatem quisquam quidem sed velit. Facere facilis enim qui neque nobis esse sit.
Repellat ipsam sint. Voluptatibus temporibus quidem aut magnam excepturi consequatur nisi. Eum velit aut perspiciatis molestiae voluptatum. Quaerat reiciendis aut voluptatem possimus vitae optio.
<div class="ui vertical segment">
<p>Dolore molestias in. Quia qui enim ut eaque amet placeat. Harum vitae molestiae nostrum odit consequatur dolore.</p>
</div>
<div class="ui vertical segment">
<p>Eos ad quibusdam et. Itaque ut dolor asperiores. Esse ea numquam. Molestias nobis ab recusandae.</p>
</div>
<div class="ui vertical segment">
<p>Quibusdam sint dicta reiciendis. Illum deserunt consequuntur et aperiam. Voluptate assumenda numquam. Autem aut ex omnis quidem.</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
Voluptates est dolore eos omnis vero. Suscipit quasi enim eaque maiores illo dolor. Et id atque quod sapiente voluptates quas.
Perferendis dolorum dolorem. Ratione eius non. Numquam quis necessitatibus officiis expedita.
Ipsum qui sit quisquam quos iusto voluptate. Rem beatae consequatur eaque hic officiis illum fugiat. Pariatur nulla saepe amet sunt. Explicabo quod aut ut alias. Dolor deserunt adipisci dicta ut qui voluptas.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Earum et veniam quasi. Aliquam magni aut dolore. Voluptas soluta veniam molestiae. Eveniet incidunt sint.</p>
</div>
<div class="ui segment">
<p>Dolore deserunt dicta necessitatibus qui quis sunt eaque. Aut est hic soluta quidem consequuntur sunt. Dicta quia sapiente vel. Reiciendis et officiis debitis a magni quas.</p>
</div>
<div class="ui segment">
<p>Odit voluptatem illo. Non eum perspiciatis cupiditate consectetur reiciendis. Ducimus officiis laudantium sed corporis quo. Eum consequatur velit pariatur similique laboriosam quibusdam saepe.</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
Sit omnis necessitatibus consequatur et qui qui. Ut optio at voluptatem. Possimus eos dignissimos et.
<div class="ui disabled segment">
<p>Voluptatem commodi id voluptatum officiis incidunt. Atque eveniet et numquam qui quia voluptate. Omnis quasi quia. Necessitatibus provident sit.</p>
</div>A segment may show its content is loading
Rerum maxime libero. Vitae omnis soluta aut ab omnis reiciendis exercitationem. Rem quibusdam qui.
Quae vel excepturi voluptates dolore qui dolores. Aliquid veritatis consectetur nulla et. Ipsa et repellendus laboriosam non possimus harum. Quia praesentium voluptates beatae iure quam omnis.
<div class="ui loading segment">
<p>Eius nostrum odit veritatis. Aut quo consequuntur dicta. Ab molestiae voluptatibus sequi sit magni sit quo.</p>
<p>Quia asperiores ut debitis omnis illum. Labore voluptas ullam saepe doloremque fuga dignissimos. Consequatur ad eum dicta rerum sed id odio.</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
Voluptatem officiis maxime. Adipisci unde eum sint sunt. Vel quia quod vero dolor dicta non aut. Eos voluptatibus inventore.
<div class="ui padded segment">
<p>Qui praesentium libero sequi repudiandae. Sequi ut et enim neque ipsum a cumque. Enim aperiam facilis et. Velit rem est. Tenetur nulla perspiciatis.</p>
</div>Consequatur omnis sed ex et dolorem dolores alias. Laboriosam eos et distinctio repudiandae. Sed illo id. Soluta iste necessitatibus nostrum dolorem omnis. Enim iure et tempore illum dolores aut.
<div class="ui very padded segment">
<p>Facere pariatur consectetur asperiores nulla labore. Commodi vero nihil quod itaque. Quae hic quos cumque iure et. Autem ut voluptas quis eaque ut ad. Quaerat dolorem ea nihil excepturi laboriosam cupiditate corrupti.</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>