Menu

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

Types

Segment

A segment of content

Placeholder Segment

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

Horizontal equal width Segments

A horizontal segment group can automatically divide segments to be equal width

Segment One
Segment Two with a lot of additional content
Segment Three

Horizontal wrapping Segments

There also exists a horizontal stackable segments alias but that alias is deprecated by 2.9.3 and will be removed in 2.10.0

A horizontal segment group can automatically wrap their segments on smaller screens

Segment One
Segment Two
Segment Three
Segment Four
Segment Five
Segment Six
Segment Seven
Segment Eight

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

The loader inherits the color of the segment, if you want to prevent this, add the usual class, so the loader color stays default, while the segment still gets its color

elastic as loading style is currently not supported because segment uses the :before pseudoclass to dimm the background.

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!

Seamless attached

A segment can be seamless attached removing the related sides border. This is especially useful when working with a vertical tabular menu

This segment is seamless left attached

This segment is seamless right attached

Padded

A segment can increase its padding

Fitted

A segment can remove its padding, vertically or horizontally

Fitted Segment

Horizontally fitted segment

Vertically fitted segment

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

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.

Scrolling

A scrolling segment has a predefined height to allow its content to be scrollable

You can also use resizable scrolling and a native resize drag handler will appear to the bottom right of the segment. This needs a modern browser, so does not work in IE11 or legacy Edge.

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.

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.

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.

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.

A scrolling segment optionally supports predefined heights long, very long, short and very short

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.

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.

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.

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.

Size

A segment can vary in size

Mini
Tiny
Small
Large
Big
Huge
Massive

Dimmer Message
Dimmer sub-header