Practical info

The practical info composition contains a title and an overview of some guidelines for a flawless visit, like accessibility and group-info.

Default

px

			
				<div class="c-practical-info ">
	<div class="l-container:10/12 l-container--default-spacing">
		<div class="l-grid l-grid--default-spacing">
			<h1 class="
					c-practical-info__title
					l-grid__col:12/12
					l-grid__col:4/12@at:vp-9
					u-margin-bottom:10@to:vp-9
				">
				Plan je <strong>bezoek</strong>
			</h1>
			<div class="
					l-grid__col:11/12
					l-grid__col:8/12@at:vp-9
					l-grid__col--left-offset:1/12@to:vp-9
				">
				<div class="c-info u-margin-top:7">
					<div class="c-info__wrapper">
						<h2 class="c-info__title">Praktisch</h2>
						<a class="c-link c-link--secondary c-info__link" href="#">
							<span class="c-link__description">Meer informatie</span>
							<span class="c-link__decoration" aria-hidden="true"></span>
						</a>
						<div class="c-info__description s-wysiwyg">
							Morbi leo risus, porta ac consectetur ac, vestibulum at
							eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
							interdum.
						</div>
					</div>
					<div class="c-info__divider">
						<div class="c-divider "></div>
					</div>
				</div>
				<div class="c-info u-margin-top:7">
					<div class="c-info__wrapper">
						<h2 class="c-info__title">Toegankelijk</h2>
						<a class="c-link c-link--secondary c-info__link" href="#">
							<span class="c-link__description">Meer informatie</span>
							<span class="c-link__decoration" aria-hidden="true"></span>
						</a>
						<div class="c-info__description s-wysiwyg">
							Morbi leo risus, porta ac consectetur ac, vestibulum at
							eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
							interdum.
						</div>
					</div>
					<div class="c-info__divider">
						<div class="c-divider "></div>
					</div>
				</div>
				<div class="c-info u-margin-top:7">
					<div class="c-info__wrapper">
						<h2 class="c-info__title">Groepen</h2>
						<a class="c-link c-link--secondary c-info__link" href="#">
							<span class="c-link__description">Meer informatie</span>
							<span class="c-link__decoration" aria-hidden="true"></span>
						</a>
						<div class="c-info__description s-wysiwyg">
							Morbi leo risus, porta ac consectetur ac, vestibulum at
							eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
							interdum.
						</div>
					</div>
					<div class="c-info__divider">
						<div class="c-divider "></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
			

		

Large

px

			
				<div class="c-practical-info ">
	<div class="l-container:10/12 l-container--default-spacing">
		<div class="l-grid l-grid--default-spacing">
			<div class="l-grid__col:12/12 u-margin-bottom:10@to:vp-7">
				<h1 class="c-practical-info__title">
					Plan je <strong>bezoek</strong>
				</h1>
			</div>
			<div class="
					l-grid__col:11/12
					l-grid__col--left-offset:1/12
				">
				<div class="c-info js-info c-info--large u-margin-top:7">
					<div class="c-info__wrapper">
						<h2 class="c-info__title">Praktisch</h2>
						<a class="c-link c-link--secondary c-info__link" href="#">
							<span class="c-link__description">Meer informatie</span>
							<span class="c-link__decoration" aria-hidden="true"></span>
						</a>
						<div class="c-info__description">
							<div class="c-info__preview s-wysiwyg">
							</div>
							<div class="c-info__content s-wysiwyg">
								Morbi leo risus, porta ac consectetur ac, vestibulum at
								eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
								interdum.
							</div>
							<button class="c-info__button">
								<span class="c-info__button-text">Lees meer</span>
								<div class="c-icon c-info__button-icon">
									<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
									</svg>
								</div>
							</button>
						</div>
					</div>
					<div class="c-info__divider">
						<div class="c-divider "></div>
					</div>
				</div>
				<div class="c-info js-info c-info--large u-margin-top:7">
					<div class="c-info__wrapper">
						<h2 class="c-info__title">Toegankelijk</h2>
						<a class="c-link c-link--secondary c-info__link" href="#">
							<span class="c-link__description">Meer informatie</span>
							<span class="c-link__decoration" aria-hidden="true"></span>
						</a>
						<div class="c-info__description">
							<div class="c-info__preview s-wysiwyg">
							</div>
							<div class="c-info__content s-wysiwyg">
								Morbi leo risus, porta ac consectetur ac, vestibulum at
								eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
								interdum.
							</div>
							<button class="c-info__button">
								<span class="c-info__button-text">Lees meer</span>
								<div class="c-icon c-info__button-icon">
									<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
									</svg>
								</div>
							</button>
						</div>
					</div>
					<div class="c-info__divider">
						<div class="c-divider "></div>
					</div>
				</div>
				<div class="c-info js-info c-info--large u-margin-top:7">
					<div class="c-info__wrapper">
						<h2 class="c-info__title">Groepen</h2>
						<a class="c-link c-link--secondary c-info__link" href="#">
							<span class="c-link__description">Meer informatie</span>
							<span class="c-link__decoration" aria-hidden="true"></span>
						</a>
						<div class="c-info__description">
							<div class="c-info__preview s-wysiwyg">
							</div>
							<div class="c-info__content s-wysiwyg">
								Morbi leo risus, porta ac consectetur ac, vestibulum at
								eros. Maecenas faucibus mollis interdum. Maecenas faucibus mollis
								interdum.
							</div>
							<button class="c-info__button">
								<span class="c-info__button-text">Lees meer</span>
								<div class="c-icon c-info__button-icon">
									<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
									</svg>
								</div>
							</button>
						</div>
					</div>
					<div class="c-info__divider">
						<div class="c-divider "></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>