Slider hero container
The Slider hero container is used for the user to drop in the Slider hero item which allows for the use of any Hero components to placed inside the dropzone. Text, button positioning and background colour/image settings can all be configured all within the hero components placed inside the Slider hero item dropzone.
- Overview
- Specification
- Style Guide Manager
- Examples in-situ
- Usage
Specification
This provides guidance on the build, layout and content options for this component.
| Component item | Requirement & purpose | Optional or mandatory | CMS options |
|---|---|---|---|
| Height | Expands based on size of content. | n/a | n/a |
| Width | Text spans 10 columns max on desktop. 12 columns on tablet and below. The container is set to full width. Content is constrained to the width of the grid. The content is full width by default but can be restricted to either 10 or 8 columns on desktop and tablet. The content is always full width on mobile. | Mandatory | 12, 10 or 8 column width. |
| Background image | Allows user to set a background image. This is full width and set to cover. | Optional | Image uploader. |
| Background image aria label | The aria-label allows us to specify a string to be used as the accessible label. | Optional | Text input field |
| Background image alignment | Allows control of background image alignment. | Optional | Vertically align top, centre or bottom. Horizontally align left, centre or right. |
| Image style | Allows user to be able to turn off applied image styling to the background image for desktop. | Optional | On/Off |
| Show/hide background image on mobile | Allows editor to hide background image on mobile breakpoint. | Optional | Show/hide. |
| Background colour | Allows user to set a background colour on the component. | Optional | Choose from colour palette. |
| Auto-play setting | Allow user to turn-off or tun-on auto-play to slider | Mandatory | Choose from the drop-down. On/Off. By default value will be on |
| Content alignment | Controls content horizontal alignment. | Optional | Left, centre or right. |
| Text position | Controls position of text. | Mandatory | Left, centre or right. |
| Slides to show | 1-6 slides can be shown at any one time. | n/a | Desktop: Show 1-6. Tablet: Show 1-6. Mobile: Set to 1 slide. |
| Slides to scroll | Selects how many slides to scroll. By default set to same number as 'slides to show'. | n/a | n/a |
| Slider navigation colour | Allows user to overwrite the colour set for slider navigation in the Style Guide Manager. | ||
| Slider pagination | Indicates number of slides. Dot size 16x16px positioned inside container centrally aligned 24px from bottom on desktop and tablet, 16px from bottom on mobile. Active slide is indicated by different colour. | Mandatory | Colours set by SGM. |
| Slider pagination active colour | Allows user to overwrite the colour set for the active pagination in the Style Guide Manager. | Optional | Choose from colour palette. |
| Slider pagination inactive colour | Allows user to overwrite the colour set for the inactive pagination in the Style Guide Manager. | Optional | Choose from colour palette. |
| Slider play/pause colour | Allows user to overwrite the colour set for the play/pause icon in the Style Guide Manager. | Optional | Choose from colour palette. |
| Slider easing | Animation duration is 0.5 seconds with “ease-in-out” easing. Transition is set to slide. | n/a | n/a |
| Auto slide function | Auto slide set to 4 seconds and pauses on hover. | n/a | n/a |
| Drag enabled | On all breakpoints. | n/a | n/a |
| Swipe enabled | On all touch devices. | n/a | n/a |
| Show/hide gutters | Allows control of spacing between blocks. NB - where gutters are turned off, drop shadows should not be used. | Mandatory | On/off. |
| Padding top and bottom | Allows control of the top and bottom spacing within this component. Set globally via the SGM. | Mandatory | Large, medium, small or none. |
| Margin bottom | Allows control of the spacing below the component. Set globally via the SGM. | Mandatory | Large, medium, small or none. |
| Pre-heading text | Allows user to set a pre-heading before H1. | Optional | Text input. |
| Pre-heading text colour | Sets pre-heading colour. | Optional | Choose from colour palette. |
| Heading text | Sets heading text. | Optional | Text input. |
| Heading element | Sets H2, H3, H4 or H5 on component. | Optional | Select heading element. |
| Heading style | Allows user to choose where more then one type of heading style may be present (i.e. multiple H2's). | Optional | Select heading style. |
| Heading colour | Sets heading colour. | Optional | Choose from colour palette. |
| Paragraph text | Sets paragraph content. | Optional | Text input. |
| Paragraph style | Sets paragraph style. | Optional | Paragraph style select. |
| Paragraph colour | Sets paragraph colour. | Optional | Choose from colour palette. |
| WYSIWYG | Allows user to format text where additional styles may be required. | Optional | WYSIWYG. |
| Link 1 (above dropzone) | Allows user to link to a URL or launch a modal. | Optional | Link text input. Link style select. Link URL input. Target select: Same window or open in new. Modal ID input. |
| Link 2 (above dropzone) | Allows user to link to a URL or launch a modal. | Optional | Link text input. Link style select. Link URL input. Target select: Same window or open in new. Modal ID input. |
| Alternative CTA (below dropzone) | Allows user to link to a URL or launch a modal. | Optional | Link text input. Link style select. Link URL input. Target select: Same window or open in new. Modal ID input. |
| Footnote text and colour | Sets footnote content and colour. | Optional | Text input. Choose from colour palette. |
Interaction
These are the interactive aspects of the component.
| Interaction |
|---|
| Link 1 links to either a defined page or can launch a modal. |
| Link 2 links to either a defined page or can launch a modal. |
| Alternative CTA links to either a defined page or can launch a modal. |
| Slider navigation switches between slides. |
| Slider pagination switches between slides. |
| Swipe/drag on hero switches between slides. |
| On mouseover/ hover the slider pauses if set to auto slide. |
| Foreground image animate | Allows users to switch On/Off the animation functionality for the foreground image. | Optional | On/off. |
|---|---|---|---|
| Select animation | Allow user to select animation from the drop-down list. | Optional | Select list |
| Duration | Set how long in seconds the animation will take to run | Required | Numeric Input |
| Delay | Set a start delay on the animation in seconds | Optional | Numeric Input |
| Iteration | Set the number of times the animation should run | Optional | Numeric Input (Maximum two) |
| offset | Set the animation to start at a specific offset before or after the element has entered the view port | Optional | Numeric Input (Pixel) |
The 'Slider container' component inherits the same style Guide Manager settings as the 'Responsive Block Container' component.
General usage dos and don'ts
| ✅ Do's | ❌ Don'ts |
|---|---|
| Give consideration to how many Slide items are visible at any one time. We recommend that using more than 3 should be limited to Slide items containing an image/icon and a short line of text. | Text in slide items will wrap as the screen width reduces, so do not show too many if you have text heavy content as this result in tall panels with orphaned text. |
| Ensure the text is legible. | Do not use a background image that makes the text hard to read. |
| Read our guidance on imagery. | |
| Read our guidance on videos. | |
| Read our guidance on the use of WYSIWYGs. |