Menu

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

Download

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

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.

Dimmer Message
Dimmer sub-header