Columns Slider

AKA – Column Rotator

Contents

Requirements

Title

Description

Title

Description

1

CMS-Managed

This component will be manually managed by an admin user in the CMS.

2

Background Color new

Admins will be able to select a light grey background

3

Number of items

There will be a minimum of three items in the component, with no maximum. Component will always center the columns

4

Referenced fields

Admins will manually pages to feature in the component. Component will reference and display the following fields per item:

  • Eyebrow: (optional)

  • Page Title

  • Image (optional)

  • Teaser text (optional)

5

Rotator function

When more than four items are included in the component, the rotator function will be triggered. Users will be able to scroll through the items using the arrows provided. Dot indicators should be used below component to reference rotating path to user.

6

Hover state and linking

Each item in the component will feature a hover state to indicate clickable content. Clicking on any item or link in the component will take a user to the page specified by an admin in the CMS.

CMS Fields

Field Label

Field Type

Required?

Notes

Field Label

Field Type

Required?

Notes

1

Background colornew

checkbox

no

Should allow light grey background when selected

2

Eyebrow

single-line text

no

for entire component

3

Title

single-line text

yes

for entire component

4

Top Link

general link

no

includes link text and URL

5

Add Column

treelist

yes

minimum of three; including five or more triggers rotator

6

Show Eyebrow

checkbox

no

allows admins to specify eyebrow text per item

7

Eyebrow

single line text

no

 

8

Show Images

checkbox

no

unchecked by default; when checked, page featured images will be pulled in for each column (Dimensions: 425 x 300)

9

Show Description

checkbox

no

default is not checked; when checked, each column will reference and display the teaser text

10

Bottom Link

general Link

no

admin will enter link text and URL in button

https://styleguide.asce.org/section-components.html#asgref-components-columns-slider