TAS Style Menu – Resource & Tools Module

The Resource & Tools Module is used on many pages of the TAS website. It is an excellent way to provide additional information via hyperlink in a colored card format. There are many configuration options, and the options depend upon the type of item chosen for the card. This module is similar to the Product cards, with two exceptions:

It will overflow extra cards to the right of the element, with navigation arrows to scroll right/left to view them.
It allows for three different sizes of cards, each with their own options.

The Large, Medium, and Small size types have the same options, except the Medium and Small omit the “Illustration” field, and the Small omits the “Body copy” field. The “CTA arrow button” field is just called the “CTA arrow” in the Small size type, however the field is the same as for the other types.

Available options:

Headline – Text to include as an H2 heading (with a class of “section-heading”) at the top of the module.
```
text
```
Items – By default, one item is created when the module is added. It is created with the default settings outlined in the subsequent sections. The “Type” of item is what determines the options. The types are shown below. For each type, and additional section is shown below, to identify the options for that type.
```
Large size | Medium Size | Small size
```

Large size

Theme – Whether the background color is dark or light (the text will be the opposite, and options for the color will change).
```
Dark | Light
```

Color – The options presented change, depending upon the Theme chosen above.
Dark:

Charcoal Slate | Slate grey | Grey | Light green | Steel blue | Teal | Violet

Light:

Sky teal | Cloud | Sage | Lilac

Iconography – An icon can be placed next to the subhead, to distinguish this card.
```
media
```
Subhead – Smaller text, presented in an H5 element, right next to the icon. This can either be omitted, or used to clarify what the card is for.
```
text
```
Title – This the main title of the card, and should concisely identify its purpose.
```
text (multiline)
```
Body copy – multiple lines of text can be used to further clarify where clicking this card will take the user.
```
opentext
```
CTA arrow button – Where clicking the card will take the user. In the large size, it will display in a “bubble button” with an animated arrow to the right.
```
URL and Link Text
```
Illustration – Select an image to display on the card. Typically, illustration images are used.
```
media
```

Note that Large size items are the same horizontal size as two Medium size items – the illustration consumes the additional horizontal space, whether one is added or not.

Medium size

Theme – Whether the background color is dark or light (the text will be the opposite, and options for the color will change).
```
Dark | Light
```

Color – The options presented change, depending upon the Theme chosen above.
Dark:

Charcoal Slate | Slate grey | Grey | Light green | Steel blue | Teal | Violet

Light:

Sky teal | Cloud | Sage | Lilac

Iconography – An icon can be placed next to the subhead, to distinguish this card.
```
media
```
Subhead – Smaller text, presented in an H5 element, right next to the icon. This can either be omitted, or used to clarify what the card is for.
```
text
```
Title – This the main title of the card, and should concisely identify its purpose.
```
text (multiline)
```
Body copy – multiple lines of text can be used to further clarify where clicking this card will take the user.
```
opentext
```
CTA arrow button – Where clicking the card will take the user. In the medium size, it will display in a “bubble button” with an animated arrow to the right.
```
URL and Link Text
```

Note that Medium size items are the same vertical size as two Small size items – Small size items will only “stack” next to a Medium item, if added as described below (in the Small Size description).

Small size

Theme – Whether the background color is dark or light (the text will be the opposite, and options for the color will change).
```
Dark | Light
```

Color – The options presented change, depending upon the Theme chosen above.
Dark:

Charcoal Slate | Slate grey | Grey | Light green | Steel blue | Teal | Violet

Light:

Sky teal | Cloud | Sage | Lilac

Iconography – An icon can be placed next to the subhead, to distinguish this card.
```
media
```
Subhead – Smaller text, presented in an H5 element, right next to the icon. This can either be omitted, or used to clarify what the card is for.
```
text
```
Title – This the main title of the card, and should concisely identify its purpose.
```
text (multiline)
```
CTA arrow – Where clicking the card will take the user. In the small size, it will display with an animated arrow to the right (without a “bubble button”).
```
URL and Link Text
```

Note that after creating a Small Item – inside the Item section is an additional button “Add small item” (in contrast to the “Add item” button); which allows creating an additional “Small Item” inside that section.

If a new Item is added, and its type set to “Small size”, it will be added to the right of the last item; even if that one is also “Small size”. However, if a new “small item” is added using this button inside the Small Item section; the two will be stacked next to each other, and take up the same vertical space cumulatively, as the Medium size item.

Below is an example of the module with some of the various options chosen, to show how they appear.

Example Resource and Tools Module

Subhead field

Title field

Body copy field

Link to nowhere

Title field

Body field

Link to nowhere

Title

Link to nowhere