Card Grid Icons

Owned by David Hodges
Last updated: Dec 08, 2021
2 min read

Contents

1 Requirements | 2 CMS Fields

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

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
Featured Item link 2

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 characters

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