Traject detail

The traject component provides an overview of the different topics that need to be covered per suggestion. Each item contains the molecule-component traject-item.

Default

px

			
				<div class="o-traject-detail">
	<ul class="o-traject-detail__list">
		<li class="o-traject-detail__item ">
			<div class="o-traject-detail__item-container">
				<article class="m-traject-item">
					<h4 class="m-traject-item__title">Beheer administratie</h4>
					<div class="m-traject-item__info">
						<p class="m-traject-item__description">Maecenas faucibas mollis interdum. Donec ullamcorper nulla non
							metus auctor fringilla.</p>
						<ul class="m-disclosure-list m-traject-item__links">
							<li class="m-disclosure-list__item">
								<a class="a-disclosure-link " href="#">
									<span class="a-disclosure-link__text">Grafieken en 3D-effecten met Adobe Illustrator</span>
									<span class="a-disclosure-link__icon icon-arrow-right"></span>
								</a>
							</li>
							<li class="m-disclosure-list__item">
								<a class="a-disclosure-link " href="#">
									<span class="a-disclosure-link__text">Communicatietips met een knipoog - ICT sector</span>
									<span class="a-disclosure-link__icon icon-arrow-right"></span>
								</a>
							</li>
							<li class="m-disclosure-list__item">
								<a class="a-disclosure-link " href="#">
									<span class="a-disclosure-link__text">Verbeter uw communicatie: toon empathie</span>
									<span class="a-disclosure-link__icon icon-arrow-right"></span>
								</a>
							</li>
						</ul>
					</div>
				</article>
			</div>
		</li>
		<li class="o-traject-detail__item o-traject-detail__item--last">
			<div class="o-traject-detail__item-container">
				<article class="m-traject-item">
					<h4 class="m-traject-item__title">Beheer administratie</h4>
					<div class="m-traject-item__info">
						<p class="m-traject-item__description">Maecenas faucibas mollis interdum. Donec ullamcorper nulla non
							metus auctor fringilla.</p>
						<ul class="m-disclosure-list m-traject-item__links">
							<li class="m-disclosure-list__item">
								<a class="a-disclosure-link " href="#">
									<span class="a-disclosure-link__text">Grafieken en 3D-effecten met Adobe Illustrator</span>
									<span class="a-disclosure-link__icon icon-arrow-right"></span>
								</a>
							</li>
							<li class="m-disclosure-list__item">
								<a class="a-disclosure-link " href="#">
									<span class="a-disclosure-link__text">Communicatietips met een knipoog - ICT sector</span>
									<span class="a-disclosure-link__icon icon-arrow-right"></span>
								</a>
							</li>
							<li class="m-disclosure-list__item">
								<a class="a-disclosure-link " href="#">
									<span class="a-disclosure-link__text">Verbeter uw communicatie: toon empathie</span>
									<span class="a-disclosure-link__icon icon-arrow-right"></span>
								</a>
							</li>
						</ul>
					</div>
				</article>
			</div>
		</li>
	</ul>
</div>
			

		

Documentation

Modifiers

  • o-traject-detail__item--last

    Indicate which element is the last item within the list. This will create some bottom spacing on the last item which all the other items don't have.