Product Name

Segment

A segment of content

Dolorem praesentium distinctio et occaecati. Assumenda veritatis recusandae eveniet eum provident. Rerum numquam repellat dolores pariatur.

Show Code

  <div class="ui segment">
    <p>Omnis at veritatis nemo. Vel unde est quas qui. Voluptas dolorem blanditiis et occaecati incidunt. Nisi ut autem. Ut eos eveniet et ex aut.</p>
  </div>

Raised Segment

A segment may be formatted to raise above the page.

Necessitatibus et cupiditate fugit suscipit possimus. Provident quaerat aut aut. Aspernatur harum nihil et eveniet voluptas quis.

Show Code

  <div class="ui raised segment">
    <p>Impedit consequatur ut et voluptatem exercitationem. Enim earum culpa. Sed excepturi maxime dicta numquam sapiente sed rem. Facilis et nisi molestias.</p>
  </div>

Stacked Segment

A segment can be formatted to show it contains multiple pages

Ipsam amet dicta qui ut reiciendis aut. Consequatur tenetur enim nobis. Expedita dolor sunt.

Show Code

  <div class="ui stacked segment">
    <p>Magnam sed autem ipsum. Ratione quaerat quasi dicta enim non vel. Molestiae quisquam ipsa vel voluptatem accusantium. Possimus eum qui neque et consequatur dolorem accusamus. Culpa aut inventore veritatis necessitatibus numquam consectetur.</p>
  </div>

Nihil dolores minus sint. Pariatur consequatur aspernatur nesciunt dignissimos aliquam temporibus. Et sed libero et.

Show Code

  <div class="ui tall stacked segment">
    <p>Dolorum ea cupiditate eos. Porro qui est aliquam provident. Nemo non reprehenderit molestias et corporis in nihil. Vitae cupiditate consequatur distinctio. Et ut aperiam.</p>
  </div>

Vertical Segment

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

Laudantium ad veniam in quibusdam ea. Molestias ipsam quo voluptate. Ut in praesentium sunt consectetur.

Dolor natus eum autem. Est ad eius cupiditate nesciunt earum quia. Est explicabo est voluptas.

Voluptatem exercitationem nemo. Et cupiditate in quia libero. Sunt ut nisi.

Show Code

  <div class="ui vertical segment">
    <p>Vel dicta non. Ut impedit ut voluptatem odit quia ea. Sit non dolore omnis aliquid laudantium consectetur. A alias iusto molestias rerum fugit ut.</p>
  </div>
  <div class="ui vertical segment">
    <p>Aut aliquid quia. Repudiandae sapiente qui rerum libero assumenda laudantium. Nemo pariatur earum autem et magni. Nisi eos est quis at. Velit aliquid quas commodi molestiae explicabo ducimus.</p>
  </div>
  <div class="ui vertical segment">
    <p>Porro harum ut fugiat ex aspernatur. Facilis occaecati quisquam culpa sunt tempora saepe. Et eius numquam qui ducimus omnis corrupti. Animi quos consequuntur. Assumenda eligendi at eos et praesentium occaecati.</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

Non eos dolor aspernatur qui omnis ad reprehenderit. Ut dolore mollitia ea nam quibusdam dolor. Autem quia qui beatae.

Similique expedita velit. Facilis labore non quaerat provident et veniam qui. Quibusdam non dolorum repudiandae molestiae quis nihil perspiciatis. Illo assumenda in consequuntur saepe et nemo officiis. Facilis quisquam dolore possimus dolorem sit assumenda.

Corrupti eum natus eum esse labore. Facere quis odio. Facere itaque sit consequuntur velit. Enim aut molestias architecto.

Show Code

  <div class="ui horizontal segments">
    <div class="ui segment">
      <p>Autem ipsam quis explicabo similique ut facere. Maiores magnam est autem facere earum maxime ut. Aut vitae aliquid consequatur recusandae harum non.</p>
    </div>
    <div class="ui segment">
      <p>Aliquam qui molestias debitis. Veniam labore consequatur facere eos. Laboriosam omnis fugiat nihil id rerum sapiente non. Voluptatibus quis soluta reiciendis autem nulla consequatur.</p>
    </div>
    <div class="ui segment">
      <p>Odio fuga culpa asperiores velit aut consequatur et. Facere eum nihil aut exercitationem ullam. Sunt voluptatem explicabo consectetur. Perspiciatis voluptatum ut modi consectetur eum unde.</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

Nulla perferendis voluptatibus laudantium facilis sapiente beatae rerum. Nostrum earum dolor. Reprehenderit vel commodi consequatur.

Show Code

  <div class="ui disabled segment">
    <p>Dolore nobis sit possimus qui fugiat quisquam. Ab quia est non. Voluptatem sed laboriosam quidem rerum.</p>
  </div>

Loading Segmentss

A segment may show its content is loading

Earum asperiores odio dolorum architecto blanditiis cum quidem. Et quia quaerat molestias. Quia esse ab autem repellat aut.

Doloremque sed provident quia vero dolorem perferendis. Eligendi sit enim animi aut incidunt libero. Reprehenderit eius illo voluptates iste.

Show Code

  <div class="ui loading segment">
    <p>Cupiditate ipsa soluta unde sunt consequatur perferendis. Labore laboriosam architecto molestiae dicta. Sit sed ut dolorem incidunt sint quisquam repudiandae.</p>
    <p>Pariatur ut recusandae reiciendis. Quo eum cumque quisquam odio sunt quasi ab. Saepe molestiae aut temporibus tempora omnis et rerum. Ratione mollitia labore rem qui.</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

Ut et in incidunt sit unde natus. Non sed quis sapiente accusamus molestias. Et ea non.

Show Code

<div class="ui padded segment">
  <p>Sed illo voluptas nemo beatae asperiores. A est voluptate. Atque rerum qui dolores voluptas quae. Veniam laborum dolores voluptates saepe voluptas. Aut et ad.</p>
</div>

Veritatis et perspiciatis dignissimos. Ut consequuntur veritatis velit qui blanditiis et. Itaque sed repellat quos labore quia provident. Impedit quaerat earum quod praesentium laudantium. Dolorum nobis aperiam omnis saepe voluptatem minus.

Show Code

<div class="ui very padded segment">
  <p>Aut quisquam eum harum consequatur. Et at corporis atque. Voluptatem voluptatum aperiam qui ipsam id.</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