Card Grid
Contents
Requirements
This component will be either dynamically or manually managed by an admin in the CMS:
Dynamic: admins will choose a parent page and specify the number of items to include in the component; the most recent pages will display
Manually: admins will choose each item individually
Component will laid out in rows and will be populated left to right. Each row will allow exactly three (3) items. There will be no maximum number items in the 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
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.
CMS Fields
Field Label | Field Type | Required? | Notes | |
|---|---|---|---|---|
| 1 | Title | single-line text | yes | for component |
| 2 | Parent Page | treelist | no | allows admin to select content from a parent page |
| 3 | Number of Items | select | no | when a parent page is selected, this number tells the component how many items to display |
| 4 | Links | treelist | yes | if parent page is NOT selected, admins will choose pages from the treelist to populate the component |
| 5 | Eyebrow | single-line text | no? | can be changed in experience editor |
https://styleguide.asce.org/section-components.html#asgref-components-card-grid