LUMEN
Menu
A segment of content
Pariatur facilis est non tempora quo sint ipsa. Blanditiis delectus sed qui eveniet quia quisquam. Sequi occaecati rerum voluptatibus laborum. Voluptas eum odio voluptas.
<div class="ui segment">
<p>Qui dolorem odio et ut quo. Vitae nostrum ratione tenetur qui. Recusandae enim voluptas quia molestiae. Delectus nulla sit sunt id inventore accusamus at. Reiciendis illum quam aut libero temporibus id.</p>
</div>A segment may be formatted to raise above the page.
Qui quo vel quis consectetur rerum. Vero est natus. Autem ab qui deleniti sunt cupiditate voluptatem. Quisquam est porro atque rem vero. Nostrum eos ducimus perferendis et.
<div class="ui raised segment">
<p>Non perspiciatis placeat et sit iusto debitis rerum. Officia animi delectus. Quae ut magnam enim nihil et delectus nam. Fugiat labore sit libero omnis. Culpa amet dignissimos voluptate fuga.</p>
</div>A segment can be formatted to show it contains multiple pages
Ut ut et et cumque veniam. Et et ad consectetur ut nulla. Nisi reiciendis esse nemo nesciunt et. Dicta ipsa et ut aut. Tenetur qui nemo.
<div class="ui stacked segment">
<p>Voluptatibus impedit provident. Et deleniti praesentium nostrum. Aut facere perferendis dolore voluptas iusto. Et rerum sed.</p>
</div>Ratione soluta repudiandae sunt fuga. Est blanditiis error ut saepe dolorem. Impedit minima ut rerum voluptate qui in. Quidem ut voluptatem veniam animi nostrum iste sit.
<div class="ui tall stacked segment">
<p>Necessitatibus tempore cum. Itaque sint cupiditate molestias dolore. Modi ut consectetur architecto at. Eaque id harum alias asperiores.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Tenetur vel eos veritatis. Vel dolor accusamus tenetur nostrum quisquam et. Corporis placeat aut omnis vel est omnis rerum. Dolorem provident deleniti.
Architecto enim quaerat totam sint rerum quo. Earum officiis tempore quam beatae autem. Ratione id consequuntur necessitatibus vero. Nihil cumque ex placeat assumenda officia.
Amet velit ut. Error voluptate accusamus repudiandae. Dolor ut consequatur cum et provident tempore doloribus. Sint sed aut quia illum reiciendis eos. Repudiandae quis eos ut quae optio illo velit.
<div class="ui vertical segment">
<p>Occaecati dicta accusamus. Totam impedit magnam. At quia quo ut magni debitis. Accusamus odit eius doloribus ratione velit mollitia.</p>
</div>
<div class="ui vertical segment">
<p>Qui deleniti asperiores officia ullam autem. Beatae laboriosam repellendus cumque voluptatibus. Consequuntur aut ea nemo consequatur et nesciunt. Ab facilis praesentium architecto aut. Asperiores vitae sint fugiat sed autem.</p>
</div>
<div class="ui vertical segment">
<p>Doloremque mollitia quo quod quae in enim deleniti. Nemo odio recusandae voluptatem. Nihil veritatis ipsum pariatur. Modi explicabo aperiam voluptatem corporis.</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 consectetur ab ut rerum nemo. Omnis vitae natus in recusandae velit tenetur. Est fugit facere. Molestias cumque magnam repudiandae quod. Occaecati ut assumenda consequatur sit.
Officia minima excepturi. Vitae nobis voluptatem et quod. Rerum voluptas necessitatibus porro commodi. Et ut enim.
Ea laudantium qui sapiente consectetur. Ea est fugit sed alias. Quo magnam odit adipisci dicta et. Aut autem odit rerum.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Occaecati magni asperiores quae. Iste omnis optio quia pariatur consequatur. Eum aut cupiditate. Quisquam non quia iste nemo et.</p>
</div>
<div class="ui segment">
<p>Unde iste non doloremque ad. Quae occaecati eaque reiciendis est incidunt architecto consectetur. Voluptatem cumque possimus temporibus voluptatum molestias quia.</p>
</div>
<div class="ui segment">
<p>Est iusto odio quia omnis quidem. Aspernatur harum aliquid eos inventore. Adipisci consequatur neque praesentium culpa quia vero eius. Dolorum dolore autem nulla aut.</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
Rerum pariatur ipsa explicabo voluptatem eaque eius modi. Ut voluptate nisi consequuntur maiores fuga. Mollitia deserunt dolore soluta esse corrupti nulla quis. Adipisci occaecati voluptates enim. Incidunt saepe sed voluptatem ut et dolorem et.
<div class="ui disabled segment">
<p>Similique excepturi est. Voluptatem ad ut iusto ut necessitatibus nobis accusantium. Hic est sed commodi corporis. Ut odit voluptatem quidem. Mollitia corporis dolorum ut ducimus id.</p>
</div>A segment may show its content is loading
Consectetur iste tenetur voluptatem minus. Sint id neque omnis consequuntur laborum et dolores. Molestias quia dolorem. Est sit sed laudantium dolorum ad rerum eaque.
Ut et non odit consequuntur ducimus et perspiciatis. Necessitatibus laboriosam eos est commodi. Esse sequi debitis fuga eaque. Officia sapiente quaerat. Labore atque voluptatem qui non laboriosam et deserunt.
<div class="ui loading segment">
<p>Aliquam iste quas placeat et. Consequuntur assumenda ut quia ipsam. Est expedita est ex illo voluptatum.</p>
<p>Ea eos nemo explicabo. Magni nostrum eos molestiae error nemo. Tempore quod non.</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
Aut vel est repudiandae blanditiis quo. Dolor libero error dolorum ut voluptate qui. Velit nulla omnis. Autem eum odit molestiae consequuntur eos et. Doloribus quaerat ea qui tenetur facere.
<div class="ui padded segment">
<p>Vitae ab qui. Quia tempore nobis et cum saepe quia libero. Sunt est voluptatum eligendi mollitia qui.</p>
</div>Accusantium quasi animi excepturi ea culpa et. Et quis id ea. Asperiores fuga totam iusto earum.
<div class="ui very padded segment">
<p>Et cumque quasi. Tenetur omnis adipisci commodi rerum voluptates. Ut nisi accusamus debitis.</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>