TAS Style Menu – Product Cards Module

The Product Card module is generally only used on landing pages, or on Get Help pages to link to related resources. While the icon and Hover icon are not required fields, the card will not “look right” without them. The Icon should be a Charcoal Slate (#383B53) stroke color, and the Hover icon should be identical, but with a White (#FFFFFF) stroke color. Both should be transparent with no fill.

It is important to note that the way the PHP for the Product Cards is written; once a card is added, if a Link is not added, it will cause a critical error on the page. While the page will load, and show some content, at the point in the HTML DOM when the link would be added, it will show the critical error message.

Available options:

Headline – Text to include as an H2 heading (with a class of “section-heading”) at the top of the module.
```
text
```
Body copy – Normal paragraph-level text, with optional headings and styling. Main content of the module, displayed above the product cards, just below the Headline. This can be viewed as introductory text to describe what is found in the product cards as a whole.
```
opentext
```
Icon – This is an icon shown in the upper-left corner of the card, to distinguish it from other cards. It should be a simple icon, with Charcoal Slate stroke (#383B53), no fill, and transparent background.
```
media
```
Hover icon – When the card is hovered over by the user’s cursor, this is the icon that shown in the upper-left corner of the card, when the card fills to the Charcoal Slate color. For that reason, it should be identical to the Icon, but with White stroke (#FFFFFF), no fill, and transparent background.
```
media
```
Title – This is a single line text field to create bolded text in the card identifying what the card links to.
```
text
```
Text – This is slightly longer text, displayed in normal font, filling the remainder of the card.
```
text (multiline)
```
Link – This is a link created with the display text and URL, presented with an animated arrow to the right. The entire card becomes the clickable element, however this field determines the target of the link.
```
URL and Link Text
```

Below is an example of the module with the recommended/typical settings. There are not significant configurations necessary for this module type. However, because the entire card becomes the clickable element, a Link must be added (it is not marked as a required field).

Product Cards Module

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare laoreet mi. Donec maximus fermentum convallis. Sed lorem nunc, tempor nec odio vitae, facilisis placerat lacus. Maecenas venenatis gravida mauris, ut dictum eros suscipit vitae. Pellentesque consectetur magna nec vulputate laoreet. Aliquam urna purus, pellentesque id nunc bibendum, ultrices viverra metus. Quisque quis auctor lectus, vel consectetur risus.