🌱 Component basics
...
Guide
...
...
Description
🧐 Specifications
...
Autoplay
Slider may be set to autoplay, but will need to be ADA accessible and have manual controls
...
Requirements
A user can navigate through the slides by using the arrow links.
...
Slides
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.
...
Number of Items
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- | line link text | yes | for each slider item |
9 | Slider Link | single-line textlink | no | ||
10 | Slider Description | linksingle-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