Rail - Usage

Basic Guidelines

Rails:

Rails are used to show breadth of content. The displayed items are all equivalent and connected via a common theme. Typical use cases include shows relating to a channel, or episodes in a TV show.

Rail characteristics:

Shows several items at a time, except on mobile viewports
No limit on content
No limit on number of rails per page
Definite start and finish
Built-in title to display theme/category
No pagination
Navigation arrows only on Desktop unless all items are visible

Carousels:

Carousels are used to showcase pieces of content that could also work stand-alone. Typically it would be used to promote hero content on top of a page.

Carousel characteristics:

Shows only one item at a time on both mobile and desktop viewports
Limited to max. of six pieces of content
Limited to one carousel per page
Content loops infinitely
Title is not built-in
Pagination is compulsory
Navigation is compulsory on all devices

Behaviour

The user can smoothly scroll through the content within the rail. Once they stop, the content will align the nearest item to the left boundary. If scrolled all the way through, the last item will snap to the right boundary.

When using the Navigation Buttons to scroll through, the items will move one-by-one.

The items within the Rail can be set up to be clickable, leading to a separate page with further detail.

Content Guidance

Character limit

The title of the Rail should be short and to the point. Avoid longer text and keep it to one line, even on mobile, which is about 20-30 characters on the smallest device.

Content limit

There is no limit for the number of items within a rail (the Figma component shows nine items by default), and the user is not expected to scroll through to the end of the Rail. Therefore it’s essential to not hide important information within the rail.

It’s possible to have more than one Rail on a page, but load times and user fatigue need to be taken into consideration.

Content setup

By default the Rail component uses the Rail Item component to display content. It can be replaced by other components and it’s not necessary to place content onto cards — content can also be free floating.

Alignment

The component and the paddings within are set up to stretch full width across the whole viewport.

Mobile

Tablet

Desktop (1248px)

The below example has been downsized proportionally to fit into the documentation.

Max width (1600px) — Figma only

The below example has been downsized proportionally to fit into the documentation.

Rail example on a 12 column desktop 1600px layout extending beyond our usual 1200px content width.

The max width variant is set up to add appropriate whitespace to the left of the Rail when it’s used on 1600px wide screens. This is to make sure that the elements within the Rail align with the rest of the page content on the left, while the items are overflowing on the right.

Rail position at starting point

Rail position at end point

Adjustable Elements

The Rail Items are optional content placeholders. They were added as a suggestion for Designers, but don’t exist as a component in React. The Rail Items can be adjusted as required (changing text styles, colours, image aspect ratios), or replaced entirely by a locally created component.

To learn more about how composable components are used in Figma, please have a look at the Designer Quickstart.

Title formatting

It’s possible to adjust the colour and the text style of the title, as long as it’s accessible.
All accessible gradients and most solid product colours require a font size larger than 24px. Please check the style description if you’re unsure.

Rail with accessible version of the Sky spectrum gradient.

Notes on Accessibility

The Rail is set up as a list. The navigation buttons will be ignored by screen readers and keyboard navigation as they would hinder the experience when using these technologies. It’s easier to move directly from the heading into the list and its content. The navigation buttons are there to help mouse users with horizontal scrolling.

When navigating through the Rail via screen reader, the title of the rail is announced first, followed by the information that a list with a number of items will follow. The user can then choose to navigate through the list item by item, or skip the list entirely.