AKA – Promo Grid
Requirements
The two items featured in this component will be manually curated.
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.
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.
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.
CMS will allow admin user to add another row (set of 2). This would automatically trigger the background toggle to be "no background".
CMS Fields
# | 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