Contents
Requirements
This component will be manually managed by an admin in the CMS.
Component will laid out in rows and will be populated left to right. Each row will have exactly one (1) featured item (i.e. with image) to include a featured image. Rows will alternate between 2 layouts, with odd numbered rows having a featured/not featured layout, and even numbered rows having a not featured/featured layout.
There will be no maximum number items in the component.
Admins will be able to apply a gradient effect to the images in this component.
When a page is selected to be included in this component, the following fields will be referenced and displayed:
Page Title
Page Teaser Text
Image (only available on items 1 and 2 in each row; see requirement #2). Otherwise image will be suppressed.
Alternately, admins may choose to feature an external link in the block, in which case the block title (and image, if applicable) must be populated manually. For any external link, an arrow icon will appear to indicate that the user will be taken away from the ASCE site.
If a user hovers the mouse over any of the items in this component, a hover state will be triggered to indicate clickable content. If a user clicks on any of the items in this component, they will be taken to the corresponding page.
Component will shrink until screen narrows to mobile size. At this point, all items will be stacked. If a feature image is included, it will display above the corresponding link.
CMS Fields
Field Label | Field Type | Required? | Notes | |
|---|---|---|---|---|
| 1 | Title | single-line text | no | for component |
| 2 | New | checkbox | no | when selected, the word "NEW" will appear in the upper left, per designs; default is off |
| 3 | Gradient | checkbox | no | checkbox select Yes to add the gradient design element to an item; default is off |
| 4 | Add Row | select | yes | allows admin to add another row of content |
| 5 | Eyebrow | single-line text | no | per block |
| 6 | Row 1 - Block 1 Link | link | yes | will pull in page featured image; includes URL |
| 7 | Row 1 - Block 2 Link | single-line text & link | yes | includes URL |
| 8 | Row 1 Featured Image Override | |||
| 9 | Row 2 - Block 1 Link | Single-line text & link | yes | includes URL |
| 10 | Row 2 - Block 2 Link | link | yes | will pull in page featured image; includes URL |
| 11 | Row 2 Featured Image Override |
https://styleguide.asce.org/section-components.html#asgref-components-masonry-grid