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.

Default

px

			
				<div class="m-highlighted-session ">
	<p class="m-highlighted-session__description">Eerstvolgende sessie</p>
	<div class="m-highlighted-session__content">
		Content of the highlighted session
	</div>
</div>
			

		

Search result

px

			
				<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>