LUMEN
Menu
A segment of content
Quia placeat dignissimos odio quo. Ut illo cupiditate. Molestiae quia omnis est. Sequi blanditiis alias ipsa odio est inventore repellat. Facere quasi voluptas rerum eum reprehenderit.
<div class="ui segment">
<p>Excepturi nemo sint consequuntur. Tempore nulla et quos sunt voluptates beatae cumque. Dicta aut magnam delectus debitis et excepturi quia.</p>
</div>A segment may be formatted to raise above the page.
Consectetur autem rem. Sit quis expedita id. Qui voluptatibus aut. Sunt maxime aut temporibus eum sit amet magnam. Velit ea ab hic.
<div class="ui raised segment">
<p>Labore vel officia ab. Corrupti iste facere saepe. Blanditiis quibusdam aut assumenda nam non. Porro cum vel. Ad hic officia.</p>
</div>A segment can be formatted to show it contains multiple pages
Magnam et consequatur. Repellendus non similique et doloremque saepe voluptas consequatur. Excepturi quia voluptas dolorem natus omnis. Quo rerum quibusdam voluptas et accusantium. Nisi eveniet et eum corrupti tempora.
<div class="ui stacked segment">
<p>Quo ratione aliquam vel sunt ducimus et. Quis suscipit sint quia itaque ut. Eum adipisci nulla quam qui maxime distinctio asperiores. Totam est ut aut. Molestias iste rem inventore aut omnis voluptatem perspiciatis.</p>
</div>Sunt nihil dolor magnam. Beatae tenetur eaque nihil veritatis. Ipsam occaecati repudiandae et fugiat quis perspiciatis autem. Unde qui aut quod.
<div class="ui tall stacked segment">
<p>Quod alias voluptatem eaque qui sint sit. Ea vel atque debitis. Iste aut sint.</p>
</div>A vertical segment formats content to be aligned as part of a vertical group
Aperiam quasi omnis laborum. Porro consequuntur aut nostrum ut rerum quia. Eos quia a ab voluptas laudantium sed assumenda. Omnis dolorem sed necessitatibus beatae at nostrum. Est labore minus dolorem.
Quod officiis error odio molestiae quia. Ut aliquam libero vitae. Rerum tenetur beatae voluptas. Optio minus quo et ut libero. Sed est dolorem tenetur beatae.
Quia ut dolores voluptatum. Quis ratione placeat. Tempore rerum voluptatem autem eos. Qui id voluptas ut molestiae cum. Aspernatur sed voluptatibus.
<div class="ui vertical segment">
<p>Deserunt id alias voluptatibus voluptates cum ab. Repudiandae illo amet fugit assumenda mollitia modi. Ullam earum omnis eum autem. Atque suscipit accusamus.</p>
</div>
<div class="ui vertical segment">
<p>Velit fugit quia placeat vitae tempore. Blanditiis eum molestiae quibusdam quas nulla velit error. Quia magni reprehenderit aut assumenda. Enim iure deserunt illum consequatur.</p>
</div>
<div class="ui vertical segment">
<p>Sint laudantium facilis sed quis. Dolore impedit ipsam. Provident est assumenda accusantium delectus et alias. Veritatis architecto vel perferendis reiciendis suscipit consequatur.</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
Molestias tempora eius sed iusto explicabo deleniti. Eveniet aliquid sed. Non temporibus et corrupti. Optio ea officia ipsa laudantium consequatur.
Molestiae minima porro. Dolores nihil exercitationem ullam similique unde quae. Consequuntur porro provident voluptate. Est debitis repellat nihil. Libero perferendis voluptas quam error.
Repudiandae modi incidunt eligendi numquam enim praesentium. Odit aut accusamus voluptatibus omnis animi nihil ipsam. Beatae id officiis temporibus exercitationem assumenda reiciendis non.
<div class="ui horizontal segments">
<div class="ui segment">
<p>Dolorum et est quam nam dolorem. Qui earum nemo. Quae similique sed quia omnis mollitia autem.</p>
</div>
<div class="ui segment">
<p>Voluptatem quisquam molestiae natus. Ea fuga sed. Aut vero hic explicabo libero ut. Et temporibus iusto.</p>
</div>
<div class="ui segment">
<p>Ea harum tenetur debitis consequatur vitae. Ipsam sed totam vel. Deleniti exercitationem omnis accusamus tempore. Ullam ipsum consequatur quas. Quidem rem praesentium est quia beatae quae nesciunt.</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
Nesciunt veniam ut qui nihil consequatur. Repellendus omnis quidem et. Veniam quo illo voluptatibus commodi. Eos ad sint. Odio ut ut reiciendis vero.
<div class="ui disabled segment">
<p>Sed facere soluta nemo odit enim suscipit culpa. Sed repellendus et vel provident. Et qui aut debitis cumque dicta nostrum.</p>
</div>A segment may show its content is loading
Recusandae voluptas adipisci nostrum. Ut sint voluptatibus. Ea sint aut recusandae. Ut ad commodi aut laborum occaecati magnam.
Qui provident eum modi maiores. Placeat veritatis omnis optio consequatur omnis. Praesentium adipisci odit at consequatur.
<div class="ui loading segment">
<p>Iste dicta qui. Ducimus totam voluptatum molestiae. Et voluptatem voluptas repudiandae ut.</p>
<p>Vero excepturi architecto ut. Cumque at autem dolor quo non qui. Qui illum enim recusandae ut. Non quaerat est suscipit 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
Alias saepe sit aut id et placeat. Expedita maiores magni in voluptas voluptas corporis. Asperiores necessitatibus iste a rerum rerum libero numquam. Sunt laboriosam sit ut autem. Eveniet earum natus quisquam.
<div class="ui padded segment">
<p>Eum qui architecto enim eum atque voluptatem est. Autem dicta ipsum fugiat error. Beatae quia consequatur quis soluta ut. Voluptate id aspernatur quis officiis libero. Veniam deleniti nemo et sit.</p>
</div>Odit aut aspernatur qui. Aliquam distinctio rerum. Hic deserunt est.
<div class="ui very padded segment">
<p>Occaecati velit aspernatur quia fugit blanditiis non. Labore facere tenetur totam nihil magnam dicta corrupti. Doloribus autem voluptate perferendis placeat laudantium harum. Tempore nobis inventore distinctio modi adipisci accusantium cumque. Repudiandae id pariatur minima atque.</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>