LUMEN
Menu
A segment of content
Ea modi quia autem. Cum non laboriosam sit maxime vel corporis deserunt. Pariatur quos sed velit est enim.
<div class="ui segment">
<p>Molestiae ut assumenda ut omnis quidem incidunt. Assumenda consequuntur voluptatibus doloribus ut molestias eius. Dicta qui ut eos nesciunt in aut.</p>
</div>A segment may be formatted to raise above the page.
Unde eum sit eos maiores eligendi necessitatibus at. Eum excepturi ipsum asperiores dicta consequatur. Quas consequatur ex maxime quam unde aliquid. Et dolor provident asperiores ea architecto commodi.
<div class="ui raised segment">
<p>Sit possimus non eum nesciunt velit quo voluptatem. Impedit ut atque qui veritatis esse ipsum. Illum et distinctio recusandae earum sint qui molestiae. Consequuntur et aut.</p>
</div>A segment can be formatted to show it contains multiple pages
Nesciunt quia quia rem sed quod quasi modi. Magni unde in. Quia est quo. Consectetur excepturi earum veritatis porro. Officia adipisci quos.
<div class="ui stacked segment">
<p>Voluptates eum rem rerum temporibus modi maxime dolorem. Iure nihil ut blanditiis. Voluptate adipisci et.</p>
</div>Voluptatum iusto consequatur quasi. Quod minus mollitia est molestiae illum sint. Quia magnam dolores dolore error at. Nobis at repellat ut id.
<div class="ui tall stacked segment">
<p>Reiciendis ducimus ratione assumenda fugiat dolores modi voluptatem. A laudantium culpa explicabo vel reiciendis. Voluptatum est impedit quod illo aut. Repudiandae libero corrupti distinctio odit.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Sed et est debitis. Sed aut inventore eveniet non fugit. Non placeat eum sit est aut corrupti.
Eaque nihil asperiores consequuntur quia sit. Ipsam amet error velit reprehenderit at accusamus odit. Repellat pariatur dicta unde quidem architecto.
Soluta et quam laborum. Quae laboriosam cum error ipsa voluptatem ad ducimus. Voluptatem dolor laboriosam corrupti saepe reprehenderit dolorem perferendis. Nemo ipsam ullam consequuntur veritatis deleniti quaerat.
<div class="ui vertical segment">
<p>Qui est deserunt minus dicta et laborum. Ad minus et assumenda dolore beatae. Vero accusamus tempore dolorem quae.</p>
</div>
<div class="ui vertical segment">
<p>Sed dicta voluptatem incidunt nihil odio aut fuga. A impedit qui accusantium aut. Qui reprehenderit nobis rerum iure. A vero eos.</p>
</div>
<div class="ui vertical segment">
<p>Est quis assumenda ratione modi. Consequatur nobis voluptatem et vitae unde. Quasi iure libero voluptas et magnam voluptas.</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
Et excepturi non corporis aut. Libero quis qui dolores odio ut. In corporis qui dolore. Et soluta hic animi quia.
Aspernatur fugit ab voluptas. In eaque nisi quas quia. Voluptatem quia sed ipsam eius. Omnis ipsa optio labore voluptatibus ad.
Ad rerum est minima et necessitatibus quod et. Quis ut voluptatum quasi quis voluptatem delectus non. Est et reprehenderit. Labore eos possimus dolore. Veritatis sint alias ut.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Hic esse aut odio dolore saepe. Unde ut amet dolorum aut quibusdam nostrum. Vero enim iusto quo adipisci dignissimos. Voluptatem in quibusdam nobis veritatis numquam sed sunt. Dolorem quod harum nam.</p>
</div>
<div class="ui segment">
<p>Quaerat quidem modi et. Consequatur est nulla. Nisi recusandae ipsum doloremque voluptatum similique.</p>
</div>
<div class="ui segment">
<p>Quos corporis aut ut adipisci facere similique et. Ea qui ea explicabo necessitatibus molestiae. Hic qui dolores vel sit id. Autem unde occaecati sint.</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
Dolor id repellendus quod officia molestiae. Molestiae recusandae sed repellendus sit vel et rerum. Ea nihil tenetur officia distinctio facere dolorum. Velit repellendus aut.
<div class="ui disabled segment">
<p>Sint omnis et blanditiis commodi quia praesentium voluptatem. Rerum vel consequatur et. Recusandae aut iure consequuntur porro cupiditate quia. Eligendi distinctio sit dolorem nihil voluptate.</p>
</div>A segment may show its content is loading
Itaque soluta voluptatum sapiente est voluptatibus. Vero molestiae tempore alias. Ut magni voluptatem quo sed sit voluptates.
Commodi et neque laudantium omnis esse quas impedit. Omnis saepe earum. Et eaque neque minus nemo. Dolorum iste velit iure porro aut ipsam.
<div class="ui loading segment">
<p>Sed debitis beatae ut perspiciatis qui. Sunt dolores est aut reprehenderit id consequatur. Tempora repellat et et laboriosam. Vel sit esse qui eligendi ea dolorem sed.</p>
<p>Et cupiditate nobis voluptatem eos aliquam. Quae aliquid voluptatum tempore. Deleniti eius rerum dolorem molestiae. Et quae ex.</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
Quibusdam soluta atque ut velit voluptatem exercitationem. Rerum impedit voluptatem omnis voluptate provident eum sed. Repellat aut unde voluptas velit.
<div class="ui padded segment">
<p>Sed autem explicabo omnis esse. Et modi velit sapiente consectetur. Qui deserunt maxime. A sunt maxime est.</p>
</div>Modi perspiciatis ut velit accusamus. Quae saepe sunt. Quae delectus quaerat reiciendis maiores. Cum dolores eos laboriosam omnis cupiditate adipisci.
<div class="ui very padded segment">
<p>Sunt et non inventore. Ab doloremque soluta esse. Recusandae saepe sit sint.</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>