Search result

This card is the result of a search or filter and displays all the necessary information about the different courses.

Default

px

			
				<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">
				<p>Klassikaal</p>
			</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>
			

		

New

px

			
				<article class="m-search-result m-search-result--highlight">
	<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">
				<p>Klassikaal</p>
			</div>
		</div>
		<div class="a-tag m-search-result__tag ">
			<span class="a-tag__text">Nieuw</span>
		</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>
			

		

No sessions

px

			
				<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">
				<p>Klassikaal</p>
			</div>
		</div>
	</header>
	<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>
			

		

Popular

px

			
				<article class="m-search-result m-search-result--highlight">
	<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">
				<p>Klassikaal</p>
			</div>
		</div>
		<div class="a-tag m-search-result__tag ">
			<span class="a-tag__text">Populair</span>
		</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>
			

		

Spotlight

px

			
				<article class="m-search-result m-search-result--highlight">
	<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">
				<p>Klassikaal</p>
			</div>
		</div>
		<div class="a-tag m-search-result__tag ">
			<span class="a-tag__text">Spotlight</span>
		</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>
			

		

Documentation

Modifiers

  • m-search-result--highlight

    To highlight an item (new, popular & spotlight) you can use the highlight modifier to give the element a colored border