Promo Grid

AKA – Full Width Double Promo | Double Promo

Contents

Requirements

Title

Description 

Title

Description 

1

CMS-Managed

The two items featured in this component will be manually curated. 

2

Layout 

The component will be full-width, consisting of two distinct blocks. Each of the two featured items will be contained in centered blocks with predetermined aspect ratio (not CMS-managed). When viewed on mobile, the items will be stacked. 

3

Hover State and Linking 

If a user hovers the cursor over one of the two items featured in the component, the appearance will change to differentiate it from the other item in the component. Admin users will be able to specify the destination URL for each button in the component. If a user clicks the one of the buttons, they will be taken to the specified page. 

4

Linking 

Admin users will be able to specify the destination URL for each button in the component. If a user clicks the one of the buttons, they will be taken to the specified page. 

5

Ability to add row 

CMS will allow admin user to add another row (set of 2). This would automatically trigger the background toggle to be "no background". 

6

Image Requirements 

for both left and right; size: 623 x 440

CMS Fields

Field Label

Field Type

Required?

Notes

Field Label

Field Type

Required?

Notes

1

Title

single-line text

yes

will link if a link is entered (#7)

2

Show Images

checkbox

no

default is checked; allows admins to include images in the component

3

Image

image

no

for both left and right; size: 623px x 440px

4

Eyebrow

single-line text

no

for both left and right

5

Heading

mulit-line text

yes

for both left and right; heading for each featured item

6

Description

mulit-line text

no

for both left and right

7

Link

link

yes

for both left and right; URL and button text

8

Background

toggle

no

turns background color off for this component

https://styleguide.asce.org/section-components.html#asgref-components-double-promo