Rail

Overview

View on FigmaView on GitHub

Purpose

Shows a vast variety of visual content that is connected by a common theme.

Anatomy

The Rail component can be broken down into the following elements -

  1. 1
  2. 2
  3. 3

  1. Title

    The subject that ties all of the content within the Rail together.

  2. Navigation

    Large viewpoint versions use Icon Buttons for navigation.

  3. Rail Item

    Content that can be customised.

Variants & States

  • Breakpoint: Mobile, Tablet, Desktop, Max Width
  • Title Alignment: Left, Centred

Mobile

example of Rail layout on mobile browsers showing overflow behaviour.

Desktop

example of Rail layout on larger desktop browsers showing overflow behaviour and navigagion buttons.