Product Name

Segment

A segment of content

Eveniet ducimus magnam minus similique ipsum. Nihil in rerum dolores enim aut. Incidunt est amet eos asperiores quas.

  <div class="ui segment">
    <p>Doloribus iste et illo ad quia ut. Et dolores enim eos adipisci non. Dolorem sunt repellendus est. Sapiente veniam asperiores est distinctio. Quos autem totam ab laboriosam laudantium.</p>
  </div>

Raised Segment

A segment may be formatted to raise above the page.

Et dolor tempore modi veniam nostrum iusto illum. Dicta numquam impedit sint sed aut. Officia odio dignissimos similique quia accusantium sapiente cum. A est qui.

Show Code

  <div class="ui raised segment">
    <p>Illum dolorem reiciendis enim sapiente ex labore. Neque alias odit dolor quaerat doloremque. Deserunt culpa labore nulla.</p>
  </div>

Stacked Segment

A segment can be formatted to show it contains multiple pages

Minus inventore eum explicabo voluptas sunt. Recusandae et similique ullam dolor voluptatum eum laudantium. Et dolores doloremque.

Show Code

  <div class="ui stacked segment">
    <p>Quia eveniet dolore. Delectus in officiis rem libero. Est ab ipsa dolorum. Nihil cupiditate voluptatibus doloribus accusantium eum consequatur.</p>
  </div>

In sint animi qui consequuntur. Inventore porro numquam. Quo sit quis. Error aut ex tempore.

Show Code

  <div class="ui tall stacked segment">
    <p>Quia quaerat nostrum sequi. Deleniti sed cupiditate perferendis incidunt quidem alias. Ea necessitatibus velit error.</p>
  </div>

Vertical Segment

A vertical segment formats content to be aligned as part of a vertical group

Nobis voluptates architecto non voluptas. Quis delectus non quae pariatur. Saepe aut eveniet minima similique. Eos aut itaque enim.

Soluta enim ut vel accusantium. Ipsa placeat porro quisquam provident. Incidunt inventore velit et veritatis distinctio aut aut.

Ea laboriosam harum est et ullam nulla. Maiores enim dolorem earum esse est sed. Non aut libero.

Show Code

  <div class="ui vertical segment">
    <p>Sequi est ut. Ut voluptatum molestiae voluptate est iure. Ex dolorem fugit numquam dolor.</p>
  </div>
  <div class="ui vertical segment">
    <p>Repellat officiis quia et esse quam. Accusantium voluptatem est. Tenetur corrupti odit odio. Voluptatibus voluptas nostrum nihil illo officiis consequatur.</p>
  </div>
  <div class="ui vertical segment">
    <p>Est et voluptatem hic nobis laudantium tenetur. Cupiditate molestiae et ipsa velit labore qui rerum. Assumenda quae omnis occaecati nihil harum quam modi. Nesciunt minus tempore dolores nihil.</p>
  </div>

Segments

A group of segments can be formatted to appear together

Top

Middle

Bottom

Show Code

  <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

Bottom

Show Code

  <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

Show Code

  <div class="ui segments">
    <div class="ui segment">
      <p>Top</p>
    </div>
    <div class="ui secondary segment">
      <p>Secondary Content</p>
    </div>
  </div>

Nested Segments

A group of segments can be nested in another group of segments

Top

Nested Top

Nested Middle

Nested Bottom

Middle

Top

Middle

Bottom

Show Code

  <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>

Horizontal Segments

A segment group can appear horizontally

Omnis eum laboriosam ea corporis. Doloremque consequatur aut. Nihil dolorum sit quibusdam sint voluptas.

Optio qui a veniam iste. A fugiat aut. Saepe accusamus fuga.

Enim facere est aut et expedita. Et fugiat cumque nam ea saepe in. Aut ipsum autem voluptas. Et cupiditate similique facere quo id.

Show Code

  <div class="ui horizontal segments">
    <div class="ui segment">
      <p>Atque voluptas quos occaecati. Deserunt quo impedit. Commodi saepe qui. Quia et deserunt facilis dolor iusto. Esse odit asperiores nobis.</p>
    </div>
    <div class="ui segment">
      <p>Id eos quibusdam placeat eum optio amet. Voluptatem omnis in vitae corrupti earum dolores commodi. Ea eum molestias quae dolor. Totam maxime ducimus neque ipsa veniam.</p>
    </div>
    <div class="ui segment">
      <p>Non similique illo veritatis. Aut voluptatum ullam fuga mollitia dolorem eligendi laboriosam. Et officia qui est.</p>
    </div>
  </div>

Raised Segmentss

A group of segments can be raised

Top

Middle

Bottom

Show Code

  <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>

Stacked Segmentss

A group of segments can be stacked

Top

Middle

Bottom

Show Code

  <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>

Disabled Segmentss

A segment may show its content is disabled

Aut possimus alias soluta esse ut tempore. Rerum magni aut consequatur doloremque ut ratione fugiat. Sit voluptatem tempore. Accusamus reiciendis consequatur ipsam optio.

Show Code

  <div class="ui disabled segment">
    <p>Saepe ut velit doloribus. Eos excepturi eaque et modi. Enim quia ad voluptatum animi. Ut cupiditate mollitia corrupti tempore ullam voluptatem sed.</p>
  </div>

Loading Segmentss

A segment may show its content is loading

Inventore illo enim voluptatem. Eius excepturi sequi doloribus quos. Corrupti molestias ut debitis quos. Et et unde explicabo dolores repellat officiis consectetur. Autem ut consequatur est deserunt non corporis.

Quia aut incidunt nesciunt quas ad tempora. Quod quos autem dolorem iusto. Ipsum quo laborum nam vel reiciendis. Dolor voluptatum qui voluptatem odit minus voluptatem. Necessitatibus et non.

Show Code

  <div class="ui loading segment">
    <p>Suscipit reprehenderit et numquam maxime necessitatibus eveniet illum. Quisquam voluptatem voluptas corrupti rerum. Delectus sit corporis adipisci ipsum esse.</p>
    <p>Corrupti nostrum incidunt iusto. Sed modi ea qui magnam eum est. Quis ipsa fugit aspernatur veritatis sunt ratione. Voluptatem doloremque expedita quaerat eum debitis.</p>
  </div>

Inverted

A segment can have its colors inverted for contrast

I'm here to tell you something, and you will probably read me first.

Show Code

<div class="ui inverted segment">
  <p>I'm here to tell you something, and you will probably read me first.</p>
</div>

Padded

A segment can increase its padding

Dolores necessitatibus eveniet atque cumque tempore. Quasi voluptatem soluta id. Sed quis placeat dolores fugiat repudiandae nesciunt. Numquam ut adipisci. Eos adipisci rerum in quibusdam veniam.

Show Code

<div class="ui padded segment">
  <p>Veritatis recusandae perferendis doloremque nulla quas. Distinctio deserunt tempore et eos ab. Et voluptas tenetur ab facilis eum consequatur qui. Minima voluptatem aperiam.</p>
</div>

A rem sed. Dignissimos voluptatem est possimus eligendi. Est consequatur voluptatem eius qui.

Show Code

<div class="ui very padded segment">
  <p>Quo dolor aliquid voluptatem molestiae labore ea. Dolor eius ad consequatur pariatur veniam. Earum iste a nihil culpa autem. Et voluptas iste tempore id in possimus.</p>
</div>

Compact

A segment may take up only as much space as is necessary

Pellentesque habitant morbi

Show Code

<div class="ui compact segment">
  <p>Pellentesque habitant morbi</p>
</div>

Pellentesque habitant morbi

Show Code

<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>

Colored

A segment can be colored

Red

Orange

Yellow

Olive

Green

Teal

Blue

Violet

Purple

Pink

Brown

Grey

Black

Show Code

<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

Red

Orange

Yellow

Olive

Green

Teal

Blue

Violet

Purple

Pink

Brown

Grey

Black

Show Code

<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>

Emphasis

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.

Show Code

<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.

Show Code

<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.

Show Code

<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>

Text Alignment

A segment can have its text aligned to a side

Right

Left

Center

Show Code

<div class="ui right aligned segment">
  Right
</div>
<div class="ui left aligned segment">
  Left
</div>
<div class="ui center aligned segment">
  Center
</div>

Basic

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.

Show Code

<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>

Product Name

PAGES

Segment

Raised Segment

Stacked Segment

Vertical Segment

Segments

Nested Segments

Horizontal Segments

Raised Segmentss

Stacked Segmentss

Disabled Segmentss

Loading Segmentss

Inverted

Padded

Compact

Colored

Emphasis

Text Alignment

Basic