Masonry Grid

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.

	Field Label	Field Type	Required?	Notes

	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 and link text (visible on hover) page featured image will be have an override option; to be used when featuring external links teaser text will be editable; mainly used for external links
7	Row 1 - Block 2 Link	single-line text & link	yes	includes URL and link text (visible on hover) teaser text will be editable; mainly used for external links
8	Row 1 Featured Image Override
9	Row 2 - Block 1 Link	Single-line text & link	yes	includes URL and link text (visible on hover) teaser text will be editable; mainly used for external links
10	Row 2 - Block 2 Link	link	yes	will pull in page featured image; includes URL and link text (visible on hover) page featured image will be have an override option; to be used when featuring external links teaser text will be editable; mainly used for external links
11	Row 2 Featured Image Override