Menu

Rail
A rail is used to show accompanying content outside the boundaries of the main view of a site

Download

Introduction

When to Use

Rails display optional accompanying content outside of the main viewport of your website. Sites often use rails with sticky content to fix additional—often optional—content to your viewport as you scroll through the page.

Semantic's default rail is 300px wide, just large enough to fit many common ad unit sizes, and just wide enough for a sub-navigation menu or a prominent call-to-action.

Adjusting Sizes

Railed content will most likely require arbitrary breakpoints that are specific to your site's content, to ensure they do not exceed the horizontal width of a user's browser.

Rails are generally used beside long, single-column containers with long-form content like blog posts, articles, or user profiles. Generally your main text container width should be set between around 600-800px depending on your font size to optimize line length for readability.

This set-up means most tablet browsers can only accomodate a single rail. Ultrabooks and lower resolution computers two small rails, and larger monitors, usually two full-sized rails. The specifics of this implementation is left up to you in your project.

The following examples do not use any breakpoints, so some railed content may appear outside your browser's viewport on smaller screens.

Types

Rail

A rail can be presented on the left or right side of a container

Left Rail Content
Right Rail Content

Internal

A rail can attach itself to the inside of a container

Left Rail Content
Right Rail Content

Dividing

A rail can create a division between itself and a container

Left Rail Content
Right Rail Content

Variations

Attached

A rail can appear attached to the main viewport

Left Rail Content
Right Rail Content
Left Rail Content
Right Rail Content

Close

A rail can appear closer to the main viewport

Left Rail Content
Right Rail Content
Left Rail Content
Right Rail Content

Size

A rail can have different sizes

Mini
Tiny
Small
Large
Big
Huge
Massive

Dimmer Message
Dimmer sub-header