What to Watch - Usage
Basic Guidelines
Please refer to the Rail component documentation to learn more about the Rail and its purpose.
What to Watch is a Section, so it already has all padding built into the Figma component. Sections always have a clear purpose and should not be altered outside of their defined pattern.
Behaviour
The user can smoothly scroll through the content within the Rail. The Desktop variant includes Navigation Buttons which move items 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
Content limit
Please refer to the Section Heading documentation for detailed guidance.
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.
Character limits
The text within each Rail Item should be short and to the point. Avoid longer text and keep it to one line if possible, which is about 20-30 characters on the smallest device.
Alignment
Sections are always placed at full width of the viewport. There is no need for additional top and bottom padding, as this is already built in.
Mobile
Desktop
The below example has been downsized proportionally to fit into this documentation.
Adjustable Elements
Please use the Rail Items as they are, i.e. keep size, image aspect ratio and content structure. Unlike the Rail component Rail component, the What-to-watch section is predefined and should stay consistent throughout the whole website.
Colour Usage
The background of the light appearance can be changed to any suitable channel colour, as long as it's dark enough to provide enough contrast to comply with AA standards.
Notes on Accessibility
Please refer to the Rail component documentation to learn more about accessibility considerations for the Rail.