Requirements
Component will be manually managed by an admin in the CMS.
Admins will be able to include featured content at the top of the component. If these fields are left blank, the icon cards will slide up, per wireframes above.
There will be no limit to the number of items in the component.
Items will be populated from left to right in rows of three. If there are less than three items in a row, the items will left align. Admins will be able to adjust the order of the items in the component.
Each section of the site (e.g. Careers, Education, etc.) will have an associated icon (NOTE: icons are TBD). Whenever a page is referenced in this component, the corresponding icon will appear.
Admins will have two options per instance of the component: icons or images (shields). Only one will be allowed; for example, selecting "icons" will allow admins to select only icons for each card.
Icons will be provided in the component based on designs. Admin will be able to choose icon to use per section from a dropdown. Images (i.e. shields) will be able to be uploaded as an alternative to using icons. Helper text will be provided to give image size requirements.Whenever a page is referenced to be displayed in this component, the following fields will display:
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. Clicking any of the items that include a link in this component will take a user to the corresponding page.
CMS Fields
Field Label | Field Type | Required? | Notes | |
|---|---|---|---|---|
| 1 | Eyebrow | single-line text | no | |
| 2 | Title | multi-line text | yes | |
| 3 | Feature Item Description | multi-line text | no | |
| 4 | Featured Item Image | image | no | Image dimensions: 600 x 422 |
| 5 | Featured Item link 1 | link | no | includes button text and URL; can be internal or external |
| 6 | Image Type Select | checkbox | yes | icons or images |
| 7 | Card Links | Multi-Select General Links | yes | each link will populate a card; admins may choose link text - limit text to 15 characaters |
| 8 | Image Select | Dropdown | yes | list of icons or image select, depending on selection made |
| 9 | Images | Multi-Select | no | Image dimensions: 71 x 80. Transparent png is recommended. |
| 10 | Icons | Multi-Select | no | Select from a standard list of icons. |
https://styleguide.asce.org/section-components.html#asgref-components-card-grid-icons