Contents
| Table of 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 | |
|---|---|---|---|---|
| 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
...