🌱 Component basics
...
Title
...
Image Slider
...
Description
🧐 Specifications
...
Autoplay
Slider may be set to autoplay, but will need to be ADA accessible and have manual controls
...
Contents
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Requirements
A user can navigate through the slides by using the arrow links.
...
Each slide consists of an image, two flex fields, and optional link
...
The slider can utilize a text/visual or visual/text layout. The gradient will be lighter to darker for visual/text and darker to lighter for text/visual.
...
There will not be a limit to the number of items in the slider.
CMS Fields
Field Label | Field Type | Required? | Notes | |
|---|---|---|---|---|
| 1 | Eyebrow | single-line text | no | for text section |
| 2 | Title | multi-line text | yes | for text section |
| 3 | Description | multi-line text | no | for text section |
| 4 | Link | link | no | for text section; admins may choose style (directional link or button); internal or external; includes link text and URL |
| 5 | Add Slider Item | select | yes | allows admins to add another slider item, with CMS fields below |
| 6 | Image | image | yes | for each slider item. |
Image dimensions: 670w x 470h | ||||
| 7 | Image Credit | single-line text | no | for each slider item |
| 8 | Slider Title | single- |
link text | yes | for each slider item |
| 9 | Slider Link |
link | no | |
| 10 | Slider Description |
single-line text | no | Slider description to expand in the bottom direction. |
📐 Additional guidance
...
Content
...
Accessibility
...
Mobile
...
Best practices
...
https://styleguide.asce.org/section-components.html#asgref-components-image-slider