Jump To:

  1. Demos
    1. Basic Rail
    2. Justified Toolbar
    3. Rail with Separator
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

A horizontal, flexible container for arranging diverse inline elements. It provides a consistent layout for icons, labels, buttons, or other modular components, aligning content to either end or centering it. Item spacing is controlled via margins, allowing for individual item gap adjustments.

Demos

Basic Rail

A flexible horizontal container with the last item pushed to the right using `rail__item--pull`.

Section Title

Active
HTML 
<div class="rail">
  <div class="rail__item">
    <h3 class="h4 no-margin">Section Title</h3>
  </div>
  <div class="rail__item"><span class="tag">Active</span></div>
  <div class="rail__item rail__item--pull">
    <button class="button button--small">Action</button>
  </div>
</div>

Justified Toolbar

Using the `rail--justified` modifier to space items out across the full width.

Showing 1-10 of 124 results
HTML 
<div class="rail rail--justified">
  <div class="rail__item">
    <strong>Showing 1-10 of 124 results</strong>
  </div>
  <div class="rail__item">
    <div class="button-group">
      <button class="button button--small button--outline">Previous</button>
      <button class="button button--small button--outline">Next</button>
    </div>
  </div>
</div>

Rail with Separator

Using the `rail__item--separator` modifier to add a vertical divider before an item.

Account Settings
Security
Log Out
HTML 
<div class="rail">
  <div class="rail__item">Account Settings</div>
  <div class="rail__item">Security</div>
  <div class="rail__item rail__item--separator">
    <a href="#" class="color-danger">Log Out</a>
  </div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "gap" : 1em,
  "margin-bottom" : 1.5em,
  "separator" : true,
  "gap-modifiers": (
    "small" : 0.5em,
    "none" : 0,
    "large" : 2em
  ),
  "rule-size" : 1px,
  "rule-color" : "rule",
  "rule-margin" : 1em
);
File Information
  • File: _rail.scss
  • Group: rail
  • Type: variable
  • Lines (comments): 28-33
  • Lines (code): 35-47

Map Properties

Name Type Default Description
gap Dimension 1em The default space between items in the rail
gap-modifiers Map ("small" : 0.5em, "large" : 2em ) Alternate gaps (use child modifiers .rail__item--gap-[name], these apply gap changes between the item and the item before it
margin-bottom Dimension 1em The default space after rail
separator CssValue true Pass border property for separator, defaults to element rule style light

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _rail.scss
  • Group: rail
  • Type: mixin
  • Lines (comments): 49-52
  • Lines (code): 54-56

Examples

@include ulu.component-rail-set(( "gap" : 1.5em ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _rail.scss
  • Group: rail
  • Type: mixin
  • Lines (comments): 68-70
  • Lines (code): 72-127

Examples

@include ulu.component-rail-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _rail.scss
  • Group: rail
  • Type: function
  • Lines (comments): 58-61
  • Lines (code): 63-66

Examples

@include ulu.component-rail-get("gap");

Parameters

Name Type Description
$name Map Name of property

Require