A method for displaying featured or related content (usually including images or cards) in a left-right scroll format to maximize the information density without forcing the user to scroll further down the page.
<section id="insights" class="related-content">
<div class="container">
<div class="row">
<div class="col-12 col-md-9">
<h3 class="heading-3">Insights Carousel</h3>
</div>
<div class="col-12 col-md-3 text-md-right">
<a href="" class="btn btn-link arrow-link px-0">
See All Insights
<span class="material-symbols-outlined">arrow_right_alt</span>
</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="related-content__carousel clearfix">
<a class="card related-content-card float-left" href="">
<div class="related-content-card__img-container">
<img class="card-img-top" src="/images/insights-carousel-3.jpg" alt="Card image cap">
</div>
<div class="card-body">
<div class="related-content-card__eyebrow">
Sample Tag
</div>
<div class="card-title heading-5">
The Merits of Pay Transparency
</div>
</div>
</a>
<a class="card related-content-card float-left" href="">
<div class="related-content-card__img-container">
<img class="card-img-top" src="/images/insights-carousel-2.jpg" alt="Card image cap">
</div>
<div class="card-body">
<div class="related-content-card__eyebrow">
Sample Tag
</div>
<div class="card-title heading-5">
All Together Now??Strategic Segmentation in Talent and Reward
</div>
</div>
</a>
<a class="card related-content-card float-left" href="">
<div class="card-body">
<div class="related-content-card__eyebrow">
Sample Tag
</div>
<div class="card-title heading-5">
Wie können Unternehmen Captives sinnvoll nutzen?
</div>
<p class="card-text font-p-large text-faded">Vor- und Nachteile von konzerneigenen Versicherungsunternehmen zur Finanzierung von Mitarbeiter-Benefits</p>
</div>
</a>
<a class="card related-content-card float-left" href="">
<div class="related-content-card__img-container">
<img class="card-img-top" src="/images/insights-carousel-1.jpg" alt="Card image cap">
</div>
<div class="card-body">
<div class="related-content-card__eyebrow">
Sample Tag
</div>
<div class="card-title heading-5">
The Merits of Pay Transparency
</div>
</div>
</a>
<a class="card related-content-card float-left" href="">
<div class="card-body">
<div class="related-content-card__eyebrow">
Sample Tag
</div>
<div class="card-title heading-5">
Wie können Unternehmen Captives sinnvoll nutzen?
</div>
<p class="card-text font-p-large text-faded">Vor- und Nachteile von konzerneigenen Versicherungsunternehmen zur Finanzierung von Mitarbeiter-Benefits</p>
</div>
</a>
<a class="card related-content-card float-left" href="">
<div class="card-body">
<div class="related-content-card__eyebrow">
Sample Tag
</div>
<div class="card-title heading-5">
Wie können Unternehmen Captives sinnvoll nutzen?
</div>
<p class="card-text font-p-large text-faded">Vor- und Nachteile von konzerneigenen Versicherungsunternehmen zur Finanzierung von Mitarbeiter-Benefits</p>
</div>
</a>
<a class="card related-content-card float-left" href="">
<div class="card-body">
<div class="related-content-card__eyebrow">
Sample Tag
</div>
<div class="card-title heading-5">
Wie können Unternehmen Captives sinnvoll nutzen?
</div>
<p class="card-text font-p-large text-faded">Vor- und Nachteile von konzerneigenen Versicherungsunternehmen zur Finanzierung von Mitarbeiter-Benefits</p>
</div>
</a>
</div>
<div class="related-content__carousel-controls d-flex align-items-center justify-content-center justify-content-md-start mb-lg-2">
<button class="related-content__carousel-prev">
<span class="material-symbols-outlined">arrow_back</span>
</button>
<div class="related-content__carousel-dots mx-2"></div>
<button class="related-content__carousel-next">
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
</div>
</div>
</section>
Key specs
- Minimum 2, maximum 7 cards
- Select violet (default) or white background
- When using above/below the call to action module, use white background (mandatory)
The Insights Carousel for wtwco.com is made up of multiple cards. The maximum number of cards that can/should display are 7. While there is not an imposed minimum, it is recommended that if you have fewer than two featured items, you should consider using a different component (such as the related content matrix – small to feature the piece of content. If you only have one item, use the featured content card.
Carousels are designed from a mobile-first perspective, encouraging swiping left-to-right in the mobile & tablet experience, and using left-to-right arrows in the desktop experience.
Carousel with violet background:
Carousel with white background:
The card format maintains continuity with the display elsewhere on the site, and also visually represents the WTW master code’s rectangular boxes. These cards are the same as the Featured Content Card molecule, and are placed within a carousel structure.
Two background colors are available: a dominant WTW Violet background with a pattern, or a white background. This allows for the module to be used juxtaposed to other dominant modules. If used on a solutions page with mostly clear space, the violet adds a splash of color and interest to distinguish the content. If used on the home page with many bold modules (e.g. a full-page featured image, the call-to-action module, etc), the white background helps break up the content and to not inundate the user with too much visual stimulation.
The carousel controls use material design iconography (for the left and right arrows) and also include indicators that are drawn from the WTW symbol and master code. The number of code blocks displayed represents exactly the number of insights within the module. When the number of cards exceeds the available horizontal space in the viewport, part of the card will show, indicating to the user that there is actually content to peruse to the right. With a swipe/click right, users are able to see more options, and the indicator updates appropriately.
In any viewport size, the number of full cards that you can see is variable, depending on the width of the viewport. For example, on a mobile phone, a user will only see approximately 1.5 full cards. Therefore, the number of tall blocks in the indicators is one.
Below, you’ll see a tablet display of the exact same page. Since two full cards are able to fit in the viewport, two full code bar indicators display. The left arrow is dim, indicating that there is no content to see to the left. The right arrow is full luminosity, indicating that the user (on the desktop, or choosing to on tablet) can swipe to see more.
Below, consider the desktop display of seven cards, where the user has navigated to the second “set” of cards to display. The three tall bard indicate that the user is looking at the 4th, 5th, and 6th insight available. We don’t use pagination because it’s easier to get an overall visual snapshot with simple indicators. Additionally, both left and right arrows are full luminosity, indicating that the user can explore content to the left and to the right.
Cards within carousels do not need to have imagery. If there is no associated image, that is completely fine. The cards are design to display with the tag (type) in our monospace Fira Mono font, a bold violet link, and some additional text supporting the subject matter. That additional text does not display on the cards with photography because that would be too much information and would likely cause the user to engage less with the cards.
Do not use the carousel when featuring only one article.
Try not to use multiple carousels on the same page. This is content overload for the user and also affects page performance. If you must, please ensure that you use white and violet alternating backgrounds.
