Icon Cards Row
The icons card row displays linkable cards of icons with accompanying text. Editors may choose from outlined icons, filled icons or duotone icons. Available icons can be previewed in the Icon Library.
Suggested Uses
- Navigation to other pages
- Highlight goals, programs, departments, big ideas, or other collections
Create a New Row
- Select your rows storage folder — this is likely labeled _rows or similar. If you don't have one yet, build one now.
- From the top menu, select Add Content > Rows > Icon Cards.
Available Fields & Options
- Page Name: Required field; this is your row's file name in Cascade; customize the default name of row-icon-cards.
- Title: Required field; used as a section header for screen readers and should be meaningful.
- Show title?
- If unchecked: The title is used by screen readers, but not visually displayed.
- If checked: The title is prominently displayed at the top of the row.
- Row Theme: Select one of the available colors as the row's default theme. Elements within the row will be color-coordinated and optimized for design and accessibility. When placing the row on a page, the theme should be selected for that page.
- Intro Text: Option to add simple text below the title and above the icon cards. Text appears center justified and can include links, bold and italics.
- Icon Color: Choose Gold or Green.
- Icon Style: Choose Outline, Filled or Duotone. Icon styles can be previewed in the Icon Library.
- Icon Orientation: Choose which card style you prefer — portrait (icons on top) or landscape (icons on left).
- With captions?: Choose whether icon cards will have descriptive text. This setting is available for portrait orientation only — landscape orientation always requires captions. Your selection applies to all cards in the row.
- Icon card settings
- This row has a minimum requirement of two cards and a maximum of twelve cards. Use the green + to add a card. Use the up/down arrows or drag and drop to reorder them.
- Title: Required; displays below the icon for portrait orientation and to the right of the icon for landscape orientation.
- Icon: Choose your desired icon from the dropdown menu.
- Caption: Displays below the title. Optional for portrait orientation and required for landscape orientation. Recommended length of 50-250 characters.
- Internal Link: Use to link the card to an available Cascade asset.
- External Link: Use to link the card to an asset not available within Cascade.
- Anchor: Use to specify an anchor for your internal or external link — no # symbol required. To link to an anchor located on the same page as the row, do not specify an internal or external link destination. New to anchors? Learn how to first create an anchor on your pages or rows.
Tip: Linked cards will display a small icon indicator in the top-right corner of the photo card.
Tip: To improve your visitors' experience, consider linking all or none of the cards in your row.
Updating Row Content
- To update the content of a row, edit and publish the row file.
- You do not need to publish the pages displaying the row.
- If a row is unpublished or deleted, it will no longer appear on any live pages.
Tip: If you move or rename a row file, you will then need to publish any pages displaying the row. Not sure which pages are using the row? Check for relationships to the row.
Example Icon Cards Rows
Below, we offer sample rows to demonstrate a selection of suggested uses and best practices.