Testimonials

The testimonials component is a section of a page that should always take up the maximum container width.

Default

  • Dankzij SHIELD zijn onze werknemers nu op de hoogte van lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet.

    manager hilton hotels
  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, dolor sit amet. Lorem ipsum dolor sit amet.

    CEO De Lijn
  • Amet sit dolor ipsum lorem! Amet sit dolor, sit dolor amet. Lorem ipsum dolor sit amet...

    Rechercheur politie Antwerpen

			
				<div class="c-testimonials ">
	<div class="c-testimonials__background" style="background-image: url('/assets/images/general/testimonials/background.png')">
	</div>
	<div class="c-testimonials__container js-testimonials glide l-container">
		<div class="glide__track" data-glide-el="track">
			<ul class="glide__slides c-tesimonials__slides">
				<li class="glide__slide c-testimonial__slide">
					<div class="c-quote c-testimonials__content">
						<div class="c-quote__avatar">
							<div class="c-quote__avatar-container" style="background-image: url('/assets/images/general/quote/avatar-placeholder.png')"></div>
						</div>
						<blockquote class="c-quote__quote">
							<p class="c-quote__quote-text">Dankzij SHIELD zijn onze werknemers nu op de hoogte van lorem
								ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem
								ipsum dolor sit amet.</p>
							<footer class="c-quote__quote-author">manager hilton hotels</footer>
						</blockquote>
					</div>
				</li>
				<li class="glide__slide c-testimonial__slide">
					<div class="c-quote c-testimonials__content">
						<div class="c-quote__avatar">
							<div class="c-quote__avatar-container" style="background-image: url('/assets/images/general/quote/avatar-placeholder.png')"></div>
						</div>
						<blockquote class="c-quote__quote">
							<p class="c-quote__quote-text">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, dolor sit amet.
								Lorem ipsum dolor sit amet.</p>
							<footer class="c-quote__quote-author">CEO De Lijn</footer>
						</blockquote>
					</div>
				</li>
				<li class="glide__slide c-testimonial__slide">
					<div class="c-quote c-testimonials__content">
						<div class="c-quote__avatar">
							<div class="c-quote__avatar-container" style="background-image: url('/assets/images/general/quote/avatar-placeholder.png')"></div>
						</div>
						<blockquote class="c-quote__quote">
							<p class="c-quote__quote-text">Amet sit dolor ipsum lorem! Amet sit dolor, sit dolor amet. Lorem ipsum
								dolor sit amet...</p>
							<footer class="c-quote__quote-author">Rechercheur politie Antwerpen</footer>
						</blockquote>
					</div>
				</li>
			</ul>
		</div>
		<div class="glide__arrows c-testimonials__actions u-hide@below-viewport-7" data-glide-el="controls">
			<button class="c-testimonials__action-container" data-glide-dir="<">
				<div class="c-icon c-testimonials__action-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M16.1,0l3,3l-9,9l9,9l-3,3L5.6,13.5c-0.4-0.4-0.6-0.9-0.6-1.5c0-0.6,0.2-1.1,0.6-1.5L16.1,0z" />
					</svg>
				</div>
			</button>
			<button class="c-testimonials__action-container c-testimonials__action-container--right" data-glide-dir=">">
				<div class="c-icon c-testimonials__action-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M7.9,24l-3-3l9-9l-9-9l3-3l10.5,10.5c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.5L7.9,24z" />
					</svg>
				</div>
			</button>
		</div>
	</div>
</div>