LUMEN
Menu
A segment of content
Voluptas veritatis officiis sit exercitationem et rerum. Optio neque est autem. Veritatis nisi praesentium maiores possimus facere. Nulla ratione rerum ut. Accusamus et assumenda ut omnis culpa aliquid molestiae.
<div class="ui segment">
<p>Soluta distinctio ut debitis commodi omnis cupiditate provident. Eos consequatur voluptatem ut est et. Aliquid illo dolorem. Facilis quos repudiandae.</p>
</div>A segment may be formatted to raise above the page.
Iure sit quia sit deserunt explicabo aut. Incidunt architecto nulla fugiat odio a et. Tempore quos consequuntur veritatis. Quisquam dolor alias aliquam natus magni.
<div class="ui raised segment">
<p>Quod velit velit odio molestiae earum consequuntur. Quia error aliquam id. Error alias facilis.</p>
</div>A segment can be formatted to show it contains multiple pages
Delectus veniam dolor repellendus qui eius aliquid modi. Nisi ipsum illo deleniti inventore minus delectus enim. Asperiores consequatur nam rerum dignissimos. Repellat aut labore. Natus est id dolor qui tempora vero.
<div class="ui stacked segment">
<p>Aut est qui quo. Sunt qui non corporis vitae enim. In eos aut velit fugit. Dolore ex sunt. Fugiat expedita architecto.</p>
</div>Est sit aut repudiandae maxime. Voluptas quidem et. Et et quia.
<div class="ui tall stacked segment">
<p>Est earum quo maxime omnis autem hic. Ab architecto et autem quis hic aut aut. Autem vero corporis earum et. Sit laboriosam quos hic molestiae rerum veniam.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Commodi ipsam corrupti qui neque. Eveniet reiciendis dolores. A voluptas debitis. Id ipsum debitis est. Possimus alias voluptas.
Sint totam error. Doloribus sit rem autem iste corporis eaque aspernatur. Odio tenetur quis cupiditate.
Adipisci velit expedita non ea aut. Dolores id expedita culpa ut in laborum est. Aut possimus modi beatae aliquam aut eos debitis.
<div class="ui vertical segment">
<p>Provident voluptatem eligendi voluptatem ut laborum et. Aliquam ad nihil est. Alias animi reprehenderit quis voluptate nihil. Qui voluptatem enim tempore vel perspiciatis consequatur blanditiis. Mollitia consectetur et expedita esse voluptate totam.</p>
</div>
<div class="ui vertical segment">
<p>Et et molestiae quia mollitia. Consequatur aut iusto a est eos facilis. Saepe non reprehenderit.</p>
</div>
<div class="ui vertical segment">
<p>Consectetur provident et qui. Facilis est fugiat quod quo possimus quia necessitatibus. At rerum et totam eligendi et eum hic. Quia quasi fugiat cupiditate. Non dolores quasi.</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 nemo minus nesciunt culpa consequuntur quia. Expedita aliquid ut omnis ut error provident at. Enim ut dolorem cupiditate. Velit et rerum est. Laboriosam neque omnis.
Omnis fugiat temporibus a ut quo. Explicabo excepturi aperiam qui. Repellat dolores ad velit placeat maxime distinctio doloremque.
Aut earum ipsa labore. Deserunt repellendus placeat qui sunt. Et dolores quia in odit.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Est quas asperiores. Quod nobis pariatur dolorum accusantium rem ut eius. Earum assumenda necessitatibus voluptatem autem alias dolor consequatur. Alias et eaque inventore temporibus soluta molestiae et.</p>
</div>
<div class="ui segment">
<p>Et ea officia et impedit occaecati libero ut. Cumque ea iure repellendus veniam nobis. Soluta enim vel porro. Nulla rerum rerum consequuntur ipsam. Aspernatur iusto praesentium molestiae ut ipsam.</p>
</div>
<div class="ui segment">
<p>Non excepturi labore cum nobis veniam ducimus omnis. Vel molestias libero error et repellat omnis. Repellat eligendi minus ut. Dicta vel qui. Facilis at facere laudantium necessitatibus.</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
Est numquam omnis dignissimos aut nisi praesentium eaque. At aperiam totam error ea. Est et vel dolorem voluptates ut provident.
<div class="ui disabled segment">
<p>Voluptatem itaque veritatis necessitatibus sed et. Incidunt commodi eum et consequuntur debitis deserunt modi. Odit nisi minima.</p>
</div>A segment may show its content is loading
Qui adipisci dolore magni qui. Inventore assumenda est debitis illo asperiores. Magni aliquam debitis quam mollitia cum. Iure officiis id.
Ea autem et provident unde rem aut ratione. Molestiae quo est nam. Ipsam exercitationem maiores. Sapiente nihil laborum.
<div class="ui loading segment">
<p>Ut exercitationem illum qui. Atque repellendus natus ipsam libero. Reiciendis quis doloribus sed aperiam dolor expedita.</p>
<p>Ipsum possimus iusto voluptatum molestiae eaque minus repellat. Autem sit quis quia. Numquam est necessitatibus omnis accusamus.</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
Numquam dignissimos non fugit laboriosam nemo explicabo. Voluptas aut delectus. Corrupti sed neque et repudiandae facilis qui eos. Qui suscipit quia quibusdam dolores est provident ea.
<div class="ui padded segment">
<p>Sunt dolorum omnis doloremque sed. Delectus minima ad sed temporibus iusto. Itaque veniam eum et minima. Fuga blanditiis veritatis qui reprehenderit aperiam. Et animi cupiditate totam deleniti unde.</p>
</div>Consequuntur est quo voluptatem labore illo harum aliquam. Vero quaerat quos itaque pariatur dolore sit. Doloremque occaecati tempora quisquam magnam ad. Ducimus id animi et. Incidunt aut eum.
<div class="ui very padded segment">
<p>Sit quidem voluptas debitis similique voluptas explicabo animi. Illum nulla illo. Beatae ea quo provident aspernatur nulla dolores voluptas. Nobis cumque a eligendi quis dolorem commodi.</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>