Car UI

Front-end guide for Car UI by De Voorhoede

Detail main

The detail-main component is a wrapper component, made to contain other components. It has a width, background-color and padding-bottom.

Or set your own width in px:

Code

HTML 

<!-- detail-main -->
<main class="detail-main" data-component="detail-main">
	<span data-placeholder> </span>

	<!-- summary -->
	<div class="summary" data-component="summary">
		<section class="max-width-centered">
			<h1>DE TEST</h1>
			<div class="summary-content">
				<div class="summary-text">
					<h2></h2>
					<p></p>
				</div>
				<img src="" alt="" />
			</div>
		</section>
	</div>
	<!-- /summary -->

	<!-- quote -->
	<div class="quote" data-component="quote">
		<section class="max-width-centered">
			<blockquote></blockquote>
		</section>
	</div>
	<!-- /quote -->

	<!-- highlight -->
	<div class="highlight" data-component="highlight">
		<section class="max-width-centered">
			<h1>WAT ONS OPVIEL</h1>
			<div class="highlight-content">
				<img src="" alt="" />
				<div class="highlight-text">
					<h2></h2>
					<p></p>
				</div>
			</div>
		</section>
	</div>
	<!-- /highlight -->

	<!-- score -->
	<section class="score" data-component="score">
		<div class="score-heading">
			<h1>DE SCORES</h1>
			<span class="testing-date-person"></span>
		</div>

	</section>
	<!-- /score -->

</main>
<!-- /detail-main -->