Highlighted session
This component will highlight something in the search results by adding a grey background supported by some text. The content inside the highlighted session is variable and can be anything you want.
Search result
<div class="m-highlighted-session ">
<p class="m-highlighted-session__description">Eerstvolgende sessie</p>
<div class="m-highlighted-session__content">
<article class="m-search-result ">
<header class="m-search-result__header">
<div class="m-search-result__name">
<button class="a-favorite js-favorite m-search-result__favorite ">
<span class="a-favorite__icon"></span>
</button>
<h5 class="m-search-result__title">Cursus Excel voor beginners</h5>
</div>
<div class="a-defintion a-definition--horizontal@above-viewport-9">
<span class="a-definition__term">Opleidingstype</span>
<div class="a-definition__description">
Klassikaal
</div>
</div>
</header>
<div class="m-search-result__content">
<div class="m-search-result__table">
<div class="o-table js-table o-table--custom o-table--with-links o-table--alternate-rows o-table--compact m-search-result__session-table">
<div class="o-table__mobile-actions u-hide@above-viewport-9">
<div class="o-table__mobile-header-row"></div>
<div class="o-table__mobile-row">
<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
</div>
<div class="o-table__mobile-row">
<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
</div>
<div class="o-table__mobile-row">
<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
</div>
</div>
<div class="o-table__wrapper">
<div class="o-table__content">
<div class="o-table__header-row">
<div class="o-table__title-4-12 ">Wanneer</div>
<div class="o-table__title-4-12 ">Waar</div>
<div class="o-table__title-4-12 "></div>
</div>
<div class="o-table__body">
<div class="o-table__row">
<a href="#" class="o-table__row-link">
<div class="o-table__col-4-12">18, 19, 20, 21, 25 februari</div>
<div class="o-table__col-4-12">Hasselt, Limburg</div>
<div class="o-table__col-4-12">
<div class="a-attribute a-attribute--error">
<span class="a-attribute__icon a-attribute__icon--before icon-error"></span>
<p class="a-attribute__text">Nog 2 pl.</p>
</div>
</div>
<span class="o-table__link icon-arrow-right"></span>
</a>
</div>
<div class="o-table__row">
<a href="#" class="o-table__row-link">
<div class="o-table__col-4-12">1, 2, 3, 4, 5 maart</div>
<div class="o-table__col-4-12">Gent, Oost-vlaanderen</div>
<div class="o-table__col-4-12"></div>
<span class="o-table__link icon-arrow-right"></span>
</a>
</div>
<div class="o-table__row">
<a href="#" class="o-table__row-link">
<div class="o-table__col-4-12">28 februari 1, 2, 3, maart</div>
<div class="o-table__col-4-12">Hasselt, Limburg</div>
<div class="o-table__col-4-12"></div>
<span class="o-table__link icon-arrow-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-search-result__highlight">
<div class="a-highlight ">
<div class="a-highlight__content">
<a class="a-link a-highlight__link " href="">
<span class="a-link__text">Overige sessies</span>
</a>
</div>
</div>
</div>
</div>
<footer class="m-search-result__footer">
<a class="a-button m-search-result__cta" href="">
<span class="a-button__text">Opleiding bekijken</span>
</a>
<a class="a-link a-link--decorated " href="">
<span class="a-link__text">Incompany aanvragen</span>
</a>
</footer>
</article>
</div>
</div>