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).
<section id="related-solutions" class="related-content-matrix bg-grey">
<div class="container">
<div class="row">
<div class="col col-md-10 col-xl-6">
<h3 class="heading-3">Content Matrix – Large 4 Column</h3>
<p class="font-p-large text-faded">WTW can deliver holistic solutions by providing you our best-in-class knowledge across Talent, Risk, and Capital. Discover other related services to unlock your potential.</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 col-xl-3">
<a class="related-matrix-item-link" href="" title="Employee Insights">
<div class="related-matrix-item">
<div class="related-matrix-item__img-wrapper d-none d-md-block">
<img class="related-matrix-item__img" src="/images/related-content-matrix-1.jpg" alt="">
</div>
<div class="related-matrix-item__text-wrapper">
<div class="related-matrix-item__heading heading-5">Employee Insights
</div>
<p class="font-p-small">Unleash the power of WTW's data, advisory and software solutions to provide your organization with the right employee insights at the right time.</p>
<span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-4 col-xl-3">
<a class="related-matrix-item-link" href="" title="Talent Management">
<div class="related-matrix-item">
<div class="related-matrix-item__img-wrapper d-none d-md-block">
<img class="related-matrix-item__img" src="/images/related-content-matrix-2.jpeg" alt="">
</div>
<div class="related-matrix-item__text-wrapper">
<div class="related-matrix-item__heading heading-5">Talent Management
</div>
<p class="font-p-small">Get ahead of potential talent gaps and evaluate where the business is expected to grow or shrink over the next three to five years.</p>
<span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-4 col-xl-3">
<a class="related-matrix-item-link" href="" title="Communication & Change Management">
<div class="related-matrix-item">
<div class="related-matrix-item__img-wrapper d-none d-md-block">
<img class="related-matrix-item__img" src="/images/related-content-matrix-3.jpeg" alt="">
</div>
<div class="related-matrix-item__text-wrapper">
<div class="related-matrix-item__heading heading-5">Communication & Change Management
</div>
<p class="font-p-small">Combine our deep understanding of employee behavior with a focus on programs and processes that support lasting change.</p>
<span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-4 col-xl-3">
<a class="related-matrix-item-link" href="" title="Rewards">
<div class="related-matrix-item">
<div class="related-matrix-item__img-wrapper d-none d-md-block">
<img class="related-matrix-item__img" src="/images/related-content-matrix-4.jpeg" alt="">
</div>
<div class="related-matrix-item__text-wrapper">
<div class="related-matrix-item__heading heading-5">Rewards
</div>
<p class="font-p-small">Effective design, delivery, and execution of employee reward strategies and programs will lead to significant business value.</p>
<span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-4 col-xl-3">
<a class="related-matrix-item-link" href="" title="Total Rewards Optimization">
<div class="related-matrix-item">
<div class="related-matrix-item__img-wrapper d-none d-md-block">
<img class="related-matrix-item__img" src="/images/related-content-matrix-5.jpeg" alt="">
</div>
<div class="related-matrix-item__text-wrapper">
<div class="related-matrix-item__heading heading-5">Total Rewards Optimization
</div>
<p class="font-p-small">Helps your organization find its total rewards sweet spot — that aligns what and how much you spend with what your employees value.</p>
<span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-4 col-xl-3">
<a class="related-matrix-item-link" href="" title="Effectiveness & Productivity">
<div class="related-matrix-item">
<div class="related-matrix-item__img-wrapper d-none d-md-block">
<img class="related-matrix-item__img" src="/images/related-content-matrix-6.jpeg" alt="">
</div>
<div class="related-matrix-item__text-wrapper">
<div class="related-matrix-item__heading heading-5">Effectiveness & Productivity
</div>
<p class="font-p-small">Lets help you improve the effectiveness and productivity of your organization through your people.</p>
<span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
No specific accessibility notes
Always try to use the Sitecore module.
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.
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.
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:
Below, note the ways to use the matrix, and all options you have:
