Semantic UI React  2.0.1
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v2
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmPaginationPortalRadioRefSelectText AreaTransitionable Portal

Segment
A segment is used to create a grouping of related content.

src/elements/Segment/Segment.js
Semantic UI Segment Docs
SegmentSegment.GroupSegment.Inline

Types

Segment

A segment of content.

Try itCodeSandboxMaximizePermalink
Pellentesque habitant morbi tristique senectus.

Placeholder Segment2.4.0

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

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

Raised

A segment may be formatted to raise above the page.

Try itCodeSandboxMaximizePermalink
Pellentesque habitant morbi tristique senectus.

Stacked

A segment can be formatted to show it contains multiple pages.

Try itCodeSandboxMaximizePermalink
Pellentesque habitant morbi tristique senectus.

Piled

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

Try itCodeSandboxMaximizePermalink
Pellentesque habitant morbi tristique senectus.

Vertical Segment

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

Try itCodeSandboxMaximizePermalink
Te eum doming eirmod, nominati pertinacia argumentum ad his.
Pellentesque habitant morbi tristique senectus.
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id.

Groups

Segments

A group of segments can be formatted to appear together.

Nested Segments

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

Horizontal Segments

A segment group can appear horizontally.

Raised Segments

A segment group can be raised.

Stacked Segments

A segment group can be stacked.

Piled Segments

A segment group can be piled.

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.

Attached

A segment can be attached to other content on a page.

Attached segments are designed to be used with other attached variations like the attached Header or attached Messages.

Attached Complex

A segment can be attached in complex ways.

Padding

A segment can increase its padding.

Very Padded

A segment can further increase its padding.

Compact

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

Compact Group

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

Colored

A segment can be colored.

These colors can be inverted.

Emphasis

A segment can be formatted to appear more or less noticeable.

Inverted colors may be more or less noticeable.

Circular

A segment can be circular.

Perfectly circular Segments require content with equal width and height. Otherwise, they will flow to the size of the content.

Clearing

A segment can clear floated content.

Floated

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

Text Alignment

A segment can have its text aligned to a side.

Basic

A basic segment has no special formatting.

Sizes

A segment can have different sizes.

A group of segments can have different sizes.

This is the bottom
Blazing deployments by Vercel.