<!-- score -->
<section class="score" data-component="score">
	<div class="score-heading">
		<h1>DE SCORES</h1>
		<span class="testing-date-person">Getest op 12 juni 2014 door Hylke van Maaren en Miranda Schenkel</span>
	</div>

	<div class="score-item is-expanded" data-expandible data-expandible-open-on-focus="true">
		<!--data-expandible-close-on-blur="true"-->
		<a href="#0" name="uitstraling" class="score-title" data-expandible-handle="toggle">
			<h2>Uitstraling</h2>
			<span class="arrow-box"><span class="score-read-more">Lees meer</span><span data-icon-arrow class="icon  icon-arrow-up "></span></span>
		</a>
		<div class="score-content has-visual" data-expandible-content>
			<div class="score-box-wrapper">
				<div class="score-box">
					<span class="score-number">4</span>
					<span class="score-icon icon icon-gauge1"></span>
				</div>
			</div>
			<!--
			-->
			<p>
				De blauwe lijnen die op het exterieur en in het interieur te vinden zijn komen ook in de interfaces terug, dit is een mooi detail. Tab-achtige lijnen komen voor zowel in de UI als in het dashboard achter de UI. De backlights van de knoppen om de UI heen
				zijn niet blauw, maar rood. Het font dat gebruikt is is niet hetzelfde als op de buttons, maar dit stoort niet.
			</p>
			<!--
			--><img class="score-content-visual" src="/assets/images/bmw-i3-nl/bmw-i3-small.png" alt="Uitstraling" />
		</div>
	</div>

	<div class="score-item " data-expandible data-expandible-open-on-focus="true">
		<!--data-expandible-close-on-blur="true"-->
		<a href="#0" name="contrast" class="score-title" data-expandible-handle="toggle">
			<h2>Contrast</h2>
			<span class="arrow-box"><span class="score-read-more">Lees meer</span><span data-icon-arrow class="icon  icon-arrow-down "></span></span>
		</a>
		<div class="score-content " data-expandible-content>
			<div class="score-box-wrapper">
				<div class="score-box">
					<span class="score-number">5</span>
					<span class="score-icon icon icon-gauge1"></span>
				</div>
			</div>
			<!--
			-->
			<p>
				De blauwe lijnen die op het exterieur en in het interieur te vinden zijn komen ook in de interfaces terug, dit is een mooi detail. Tab-achtige lijnen komen voor zowel in de UI als in het dashboard achter de UI. De backlights van de knoppen om de UI heen
				zijn niet blauw, maar rood. Het font dat gebruikt is is niet hetzelfde als op de buttons, maar dit stoort niet.
			</p>
		</div>
	</div>

	<div class="score-item " data-expandible data-expandible-open-on-focus="true">
		<!--data-expandible-close-on-blur="true"-->
		<a href="#0" name="focus" class="score-title" data-expandible-handle="toggle">
			<h2>Focus</h2>
			<span class="arrow-box"><span class="score-read-more">Lees meer</span><span data-icon-arrow class="icon  icon-arrow-down "></span></span>
		</a>
		<div class="score-content " data-expandible-content>
			<div class="score-box-wrapper">
				<div class="score-box">
					<span class="score-number">4</span>
					<span class="score-icon icon icon-gauge1"></span>
				</div>
			</div>
			<!--
			-->
			<p>
				De blauwe lijnen die op het exterieur en in het interieur te vinden zijn komen ook in de interfaces terug, dit is een mooi detail. Tab-achtige lijnen komen voor zowel in de UI als in het dashboard achter de UI. De backlights van de knoppen om de UI heen
				zijn niet blauw, maar rood. Het font dat gebruikt is is niet hetzelfde als op de buttons, maar dit stoort niet.
			</p>
		</div>
	</div>

	<div class="score-item " data-expandible data-expandible-open-on-focus="true">
		<!--data-expandible-close-on-blur="true"-->
		<a href="#0" name="usability" class="score-title" data-expandible-handle="toggle">
			<h2>Usability</h2>
			<span class="arrow-box"><span class="score-read-more">Lees meer</span><span data-icon-arrow class="icon  icon-arrow-down "></span></span>
		</a>
		<div class="score-content " data-expandible-content>
			<div class="score-box-wrapper">
				<div class="score-box">
					<span class="score-number">4</span>
					<span class="score-icon icon icon-gauge1"></span>
				</div>
			</div>
			<!--
			-->
			<p>
				De blauwe lijnen die op het exterieur en in het interieur te vinden zijn komen ook in de interfaces terug, dit is een mooi detail. Tab-achtige lijnen komen voor zowel in de UI als in het dashboard achter de UI. De backlights van de knoppen om de UI heen
				zijn niet blauw, maar rood. Het font dat gebruikt is is niet hetzelfde als op de buttons, maar dit stoort niet.
			</p>
		</div>
	</div>

	<div class="score-item " data-expandible data-expandible-open-on-focus="true">
		<!--data-expandible-close-on-blur="true"-->
		<a href="#0" name="features" class="score-title" data-expandible-handle="toggle">
			<h2>Features</h2>
			<span class="arrow-box"><span class="score-read-more">Lees meer</span><span data-icon-arrow class="icon  icon-arrow-down "></span></span>
		</a>
		<div class="score-content " data-expandible-content>
			<div class="score-box-wrapper">
				<div class="score-box">
					<span class="score-number">3</span>
					<span class="score-icon icon icon-gauge1"></span>
				</div>
			</div>
			<!--
			-->
			<p>
				De blauwe lijnen die op het exterieur en in het interieur te vinden zijn komen ook in de interfaces terug, dit is een mooi detail. Tab-achtige lijnen komen voor zowel in de UI als in het dashboard achter de UI. De backlights van de knoppen om de UI heen
				zijn niet blauw, maar rood. Het font dat gebruikt is is niet hetzelfde als op de buttons, maar dit stoort niet.
			</p>
		</div>
	</div>

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

(function() {
	'use strict';

	new window.Expandible();
})();