Promo Splitter

Contents

Requirements

  • Admins will be able to choose from two(2) distinct layouts:

    • 50/50

      • half of the component is visual,

      • half is text and link

        • if link is included, the style will be a button

    • 50/50 with link list

      • links will be directional

  • Component may have a visual/text or text visual layout.

  • Each link will feature a hover state to indicate clickable content. For all links, clicking will take a user to the location specified by an admin in the CMS.

  • Any link that points to a gated content page will include a lock icon to indicate that it is gated. Clicking on it will take the user to the specified location with a login component asking for their credentials. No other content will be visible. NOTE: icon will not appear for logged-in users.

CMS Fields

Field Label

Field Type

Required?

Notes

Field Label

Field Type

Required?

Notes

1

Format

select

yes

options are 50/50, 50/50 link list, video

2

Layout

select

yes

Image left or image right

3

Background color

checkbox

no

default to white background, checkbox select to blue background/ light text

4

Eyebrow

single-line text

no

Users will choose the eyebrow text, always renders as CAPS

5

Title

multi-line text

yes

 

6

Description

rich text editor

no

Description of item featured in component.

7

Image

image

yes

CMS user will choose the image; required for all formats Image size: 840px x 590px

8

Color gradient toggle

toggle

no

default off. If on, a blue-green gradient will be applied to image. Does not apply to video thumbnails.

9

Button

link

no

for 50/50 version: admins will enter text to appear on button, as well as the URL to which it points. Internal or External

10

Add Link

link

yes

for 50/50 link list version, max 5

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