Segment | Semantic UI

UI Docs Getting Started New in 2.4 Introduction Integrations Build Tools Recipes Glossary Usage Theming Layouts Globals Reset Site Elements Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Collections Breadcrumb Form Grid Menu Message Table Views Advertisement Card Comment Feed Item Statistic Modules Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition Behaviors API Form Validation Visibility Menu Segment UI Docs Getting Started New in 2.4 Introduction Integrations Build Tools Recipes Glossary Usage Theming Layouts Globals Reset Site Elements Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Collections Breadcrumb Form Grid Menu Message Table Views Advertisement Card Comment Feed Item Statistic Modules Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition Behaviors API Form Validation Visibility Segment A segment is used to create a grouping of related content Select Language English English dansk Danish Español Spanish 简体中文 Chinese 中文 (臺灣) Chinese (Taiwan) پارسی Persian Français French ελληνικά Greek Русский Russian Deutsch German Italiano Italian Nederlands Dutch Português(BR) Portuguese Indonesian Indonesian Lietuvių Lithuanian Türkçe Turkish 한국어 Korean العربية Arabic Magyar Hungarian tiếng Việt Vietnamese svenska Swedish polski Polish 日本語 Japanese românește Romanian 2 Themes Default GitHub Download

UI Framework

Themable Build Tools Choose

Standalone

Default Theme Precompiled Choose Semantic UI Download ZIP Getting Started

Package Managers

NPM Git Standalone Segment Download ZIP View GitHub

Package Managers

Bower NPM Git Want to Support Open Source? Whitelist Your Ad-Blocker. We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.

Types

Segment

A segment of content

Placeholder Segment New in 2.4.0

A segment can be used to reserve space for conditionally displayed content.

No documents are listed for this customer. Add Document To use inline-block content inside a placeholder, wrap the content in inline. We don't have any documents matching your query Clear Query Add Document Or Find Country Add New Country Create

Raised

A segment may be formatted to raise above the page.

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.

Stacked

A segment can be formatted to show it contains multiple pages

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.

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.

Piled

A segment can be formatted to look like a pile of pages

Piled segments use negative z-index to format the additional pages below the segment. In order for them to appear correctly, your segment's offset container must have a z-index declared.

A header

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

Vertical Segment

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

Groups

Segments

A group of segments can be formatted to appear together

Top

Middle

Middle

Middle

Bottom

Top

Middle

Middle

Middle

Bottom

Top

Secondary Content

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

Bottom

Horizontal Segments

A segment group can appear horizontally

Raised Segments

A group of segments can be raised

Top

Middle

Bottom

Stacked Segments

A group of segments can be stacked

Top

Middle

Bottom

Piled Segments

A group of segments can be piled

Top

Middle

Bottom

States

Disabled

A segment may show its content is disabled

Loading

A segment may show its content is being loaded

Variations

Inverted

A segment can have its colors inverted for contrast

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

Attached

A segment can be attached to other content on a page

Attached segments are designed to be used with other attached variations like attached header or attached messages.

This segment is on top

This segment is attached on both sides

This segment is on bottom

Dogs

Dogs are one type of animal

Cats

Cats are thought of as being related to dogs, but only humans think this.

Lions

Humans don't think of lions as being like cats, but they are.

You've reached the end of this content segment!

Padded

A segment can increase its padding

Compact

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

Pellentesque habitant morbi

Pellentesque habitant morbi

Pellentesque habitant morbi

Colored

A segment can be colored

Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

These colors can be inverted

Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

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.

Inverted colors may also be 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.

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.

Circular

A segment can be circular

A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content

Buy Now $10.99

Buy Now $10.99

Clearing New

A segment can clear floated content

Floated

Floated

A segment can appear to the left or right of other content

This segment will appear to the right This segment will appear to the left

Text Alignment

A segment can have its text aligned to a side

Right Left Center

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.

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Donate Today Free & Open Source (MIT) The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks Help Translate Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks Yes, take me to the mirror

Dimmer Message Dimmer sub-header