Digital Design System

Content Matrix: Small Right Column

Displays at full-width in desktop view, this matrix is intended to display related content.

The related matrix is used across the site as a way to present quick navigation to related items. Usually, it is used to reference related solutions or services. However, the content within the matrix can be to any link (e.g. another insight).

content matrix detail

<section class="related-content-aside" id="matrix-small">
    <h5 class="heading-5">Content Matrix – Small – Right Rail</h5>
    <hr class="horizontal-rule--thick horizontal-rule--dark">
    <div class="related-content-aside__item">
        <!-- Press Release -->
        <p class="font-mono-small related-content-aside__eyebrow">Press Release</p>
        <a href="https://www.willistowerswatson.com/en-GB/News/2019/08/radar-4-5-next-generation-insurance-software-addresses-demand-for-pricing-fairness-and-transparency?__hstc=205784652.4d916e3e7dfd5737b8ff62eb90a65d3d.1634920034266.1634920034266.1634920034266.1&amp;__hssc=205784652.1.1634920034266&amp;__hsfp=2741383721" class="heading-5 related-content-aside__link" data-eventaction="Related Content Card Clicked" data-eventcategory="Navigation - Content Card: Related Content (Small)" data-eventlabel="Category:Press Release | Click Text:Radar 4.5: Next generation insurance software addresses demand for pricing fairness and transparency as rules tighten">Radar 4.5: Next generation insurance software addresses demand for pricing fairness and transparency as rules tighten</a>
    </div>
    <div class="related-content-aside__item">
        <!-- Product -->
        <p class="font-mono-small related-content-aside__eyebrow">Product</p>
        <a href="https://www.willistowerswatson.com/en-GB/Solutions/products/radar?__hstc=205784652.4d916e3e7dfd5737b8ff62eb90a65d3d.1634920034266.1634920034266.1634920034266.1&amp;__hssc=205784652.1.1634920034266&amp;__hsfp=2741383721" class="heading-5 related-content-aside__link" data-eventaction="Related Content Card Clicked" data-eventcategory="Navigation - Content Card: Related Content (Small)" data-eventlabel="Category:Product | Click Text:Radar">Radar</a>
    </div>
    <div class="related-content-aside__item">
        <!-- Service -->
        <p class="font-mono-small related-content-aside__eyebrow">Service</p>
        <a href="https://www.willistowerswatson.com/en-GB/Solutions/services/strategy-and-growth-for-insurers?__hstc=205784652.4d916e3e7dfd5737b8ff62eb90a65d3d.1634920034266.1634920034266.1634920034266.1&amp;__hssc=205784652.1.1634920034266&amp;__hsfp=2741383721" class="heading-5 related-content-aside__link" data-eventaction="Related Content Card Clicked" data-eventcategory="Navigation - Content Card: Related Content (Small)" data-eventlabel="Category:Service | Click Text:Strategy and Growth for Insurers">Strategy and Growth for Insurers</a>
    </div>
    <div class="related-content-aside__item">
        <!-- Service -->
        <p class="font-mono-small related-content-aside__eyebrow">Service</p>
        <a href="https://www.willistowerswatson.com/en-GB/Solutions/services/technology-for-insurers?__hstc=205784652.4d916e3e7dfd5737b8ff62eb90a65d3d.1634920034266.1634920034266.1634920034266.1&amp;__hssc=205784652.1.1634920034266&amp;__hsfp=2741383721" class="heading-5 related-content-aside__link" data-eventaction="Related Content Card Clicked" data-eventcategory="Navigation - Content Card: Related Content (Small)" data-eventlabel="Category:Service | Click Text:Technology for Insurers">Technology for Insurers</a>
    </div>
    <div class="related-content-aside__item">
        <!-- Solution -->
        <p class="font-mono-small related-content-aside__eyebrow">Solution</p>
        <a href="https://www.willistowerswatson.com/en-GB/Solutions/insurance-consulting-and-technology?__hstc=205784652.4d916e3e7dfd5737b8ff62eb90a65d3d.1634920034266.1634920034266.1634920034266.1&amp;__hssc=205784652.1.1634920034266&amp;__hsfp=2741383721" class="heading-5 related-content-aside__link" data-eventaction="Related Content Card Clicked" data-eventcategory="Navigation - Content Card: Related Content (Small)" data-eventlabel="Category:Solution | Click Text:Insurance Consulting and Technology">Insurance Consulting and Technology</a>
    </div>
</section>
  • A content matrix may be used to feature any type of content in the site.
  • The large matrix has an optional introductory paragraph to help set context (in addition to the section title) for the set of content within the matrix.
  • You may use multiple matrices per page. If doing so, consider alternating backgrounds or using divider lines to create good separation of content.

No specific accessibility notes

Always try to use the Sitecore module.

Columns per row

The matrix is flexible – it can display at 4x, 3x, or 2x columns across (and as many rows as needed). There is the option to customize the title and descriptive text within the module. And yes, that descriptive text can contain a link if needed.

Types of Content

Do you want to display a photo, link, and descriptive text? Or just a photo and a link? Or just a link and descriptive text? You have that option.

We do, however, recommend only displaying a photo when there is a branded image to support it. Generally, “third-tier” service pages – e.g. lower-level pages – will have a generic header and therefore not represent enough visual distinction to be worthy of being featured.

Background options

There’s also an optional gray background that helps break up content if too many of these modules are used in a row. For example, if you had [Related Solutions] followed by [Related Services] followed by [Related Insights], all using this matrix component, you may want to have the [Related Services] module have a gray background in order to “break up” the content visually. See the example below:

alt text

Below, note the ways to use the matrix, and all options you have:

alt text