Use rails to display a horizontally scrollable collection of up to 8 related items.
Items within a rail have a fixed width, with more items becoming visible as the screen size increases.
Rails have an optional heading.
Usage
Do use rails for browsable collections
Rails are best suited to collections of items that users may want to scan quickly. Items within the rail should follow the same structure and visual style to maintain a clear rhythm.
Examples include:
- Recommended content
- Promotional cards
Provide context with a heading and subheading when needed
Include a heading to help users understand what the rail contains. The heading area may also include an optional icon or graphic to reinforce the section visually. If the content is already clear from surrounding layout, the heading and subheading can be omitted.
Maintain consistent item sizes
Any card layout may be placed within a rail but avoid mixing different card sizes or layouts within the same rail. Consistency makes it easier for users to scan content and understand how many items are available. Rail cards are 300px width by default and can be any height.
Avoid using a rail when:
- Users need to compare more than 4 items at once
- The content requires detailed scanning
- Items must always be visible without interaction
- The number of items is very small
Writing a rail heading
The heading should clearly describe the type of content or the reason the items are grouped together. Avoid vague headings that do not explain the content.
Good examples
• Recommended for you
• Energy saving tips
• Help articles
Avoid
• Explore
• Suggestions
• For you
Subheadings can provide extra information when the heading alone does not fully explain the content. Subheadings should remain short and supportive rather than repeating the heading.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
v5+ |
Related