This is a stylized module meant to feature specific products – both software and standard product offerings. It should be used for other types of content. This module is visually differentiated with an accessible green color, patterned background and bold, violet links.

If you are working on wtwco.com, do not add product icons to the Sitecore media library. They are already there. Search for them in the library. If you cannot find them, please reach out to Katie Cisto.

A monospace tag pulls through the type – e.g. is it a product? Software? etc.

The bold violet text is the name of the product (which also matches the page behind this module).

Products Module Default

On hover of a specific item, the item will “zoom in” with animation. Clicking on this singular item will take the user to a page with the same name as the title. E.g. “WTW Radar Optimiser.”

Products Module Hover

If more than six product modules are selected to display, a “See all” button will appear along with a number indicating how many additional items would be exposed by clicking that button.

Products Module Expand

<a href="https://www.willistowerswatson.com/en-US/Solutions/products/work-vue" data-eventaction="Related Content Card Clicked" data-eventcategory="Navigation - Related Content: Products Matrix" data-eventlabel="Category: Product | Title: WorkVue " class="container related-content-list__item related-content-list__item-1" data-sr-id="7" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: border-bottom 0.3s ease 0s, color 0.3s ease 0s, opacity 0.6s cubic-bezier(0.5, 0, 0, 1) 0s, transform 0.6s cubic-bezier(0.5, 0, 0, 1) 0s;">
    <div class="row">
        <div class="col-12 col-md-2">
            <img src="https://media.wtwco.com/-/media/WTW/Solutions/Products/workvue-icon.svg?modified=20200416160353&amp;imgeng=meta_true&amp;la=en-US&amp;hash=9A1EB6EC270FC586BF37EBB9D6D72489" class="related-content-list__content-image" aria-hidden="true" alt="">
        </div>
        <div class="col-12 col-md-10 related-content-list__item-content">
            <div class="related-content-list__content-face">
                <span class="font-mono-small related-content-list__content-eyebrow">Product</span>

                <span class="heading-3 related-content-list__content-heading">WorkVue</span>
            </div>

            <div class="related-content-list__content-details">
                <span class="heading-5 related-content-list__content-heading" aria-hidden="true">WorkVue</span>

                <span class="font-p-small related-content-list__content-description">AI-driven software designed to reinvent jobs to achieve the optimal combination of talent and automation</span>

                <span class="arrow-link">
                    Product Information
                </span>
                <svg width="13" height="19" viewBox="0 0 13 19" xmlns="http://www.w3.org/2000/svg" class="chevron-right">
                    <path d="M0 2.86694997l6.55350468 6.63304489L0 16.1330398 2.83038291 19l9.38390279-9.50000514L2.83038291 0z" fill-rule="evenodd"></path>
                </svg>
            </div>
        </div>
    </div>
</a>

No content for this section.

All elements must satisfy WCAG 2.1 AA criteria.

Usage Rules:

  • Use this if you have two or more related products
  • If a product is a software product, the software product icon will pull through dynamically, assuming that the original page has an icon asset associated with it. Software product icons are unique per product and are designed by the Global Design team. They are also already uploaded by the Digital UX team. Do not add another version of the same icon; search for the existing icon within the media library.
  • If a product is not a software product, it does not get an icon.
  • If you don’t have any software products to list, it is okay to use a related matrix display instead.