A card is a key element for the display of content. You can use a content card to feature an insight or solution. Do not use more than one per side column, as it will overwhelm the user.
For more than 1 item to be featured, consider using a Content Matrix - Small.
<a class="card related-content-card float-left mr-3 related-content-card--aside" href="#">
<div class="related-content-card__img-container">
<img src="/images/sample-card-1610.jpg" class="card-img-top" alt="">
</div>
<div class="card-body">
<div class="related-content-card__eyebrow font-mono-small">
Eyebrow Text
</div>
<div class="card-title heading-5">Content card subject lorem ipsum</div>
</div>
</a>
Cards are vertical, rectangular containers used for displaying content. They provide a clear way to display additional content to the user. The entire card is clickable for the user, allowing a user to both tap (mobile) and click (desktop) the item.
Cards contain a non-clickable tag, using Fira Mono typeface, to provide context to the user about the type of content the card represents.
Cards also contain a clickable headline which displays in WTW Digital Violet.
Cards are flexible and may contain a photo if desired. If no photo is used it is recommended to include sub-copy in the module to keep a visual balance with the other cards that may have photos.
Imagery should be associated with the content that is being highlighted in the card. For example, if the card is featuring an article, use the hero image from that article to create a consistent branded experience. On wtwco.com, much of this is automated within the CMS.
If there is no apparent featured image on the content page, use the text-only card option.
Cards must meet WCAG 2.1 Level AA criteria.
Always use the Sitecore card component.