Visual info collapse

Component that lets you display/hide a block of informational content when clicking on the trigger. In general it can be seen as a simple toggle content component.

Default

px

			
				<div class="c-visual-info-collapse js-visual-info-collapse " role="button" tabindex="0">
	<div class="c-visual-info-collapse__container">
		<div class="c-visual-info-collapse__content-container">
			<div class="c-visual-info-collapse__header">
				<img class="c-visual-info-collapse__thumbnail u-idle" src="/assets/images/masonry/painting-01.jpg" alt="KAAN Architecten" />
				<div class="c-visual-info-collapse__meta">
					<span class="c-visual-info-collapse__subtitle">Architecten</span>
					<h4 class="c-visual-info-collapse__title">KAAN Architecten</h4>
				</div>
				<div class="c-visual-info-collapse__icon"></div>
			</div>
			<div class="c-visual-info-collapse__content s-wysiwyg">
				<img src='/assets/images/masonry/painting-01.jpg' class='u-idle' />
				<p><strong>Femme fatale</strong><br>
					Het is een feit: kunstenaars kijken graag naar vrouwen. Vroeger speelden
					ze vooral een mythologische of historische rol. Stevens stapt hiervan af.
					Hij portretteerde de eigentijdse vrouw als een verleidelijk voorwerp.
					Met De Parijse sfinks tovert hij een jonge burgervrouw om tot een
					geheimzinnige, sensuele verschijning. Een femme fatale.</p><br>
				<p><strong>Stevens’ schilderijen</strong><br>
					Brusselaar Alfred Stevens maakte in Parijs furore als schilder van
					prachtig geklede dames. Hij portretteert ze in charmante genrestukken.
					Daarin legt hij telkens een vluchtige stemming neer: de weemoed bij een
					afscheid, de ontroering van een brief, het geruis van een zijden japon.
					Stuk voor stuk sfeervolle schilderijen vol rijkdom en luxe. ‘De blik van
					een vrouw bezit meer charme dan het mooiste landschap of zeezicht en
					meer aantrekkingskracht dan een zonnestraal’. Dat schrijft Stevens in
					zijn ‘Impressions sur la peinture': een boek met 360 wijsheden over de
					schilderkunst. Die gedachtegang komt duidelijk tot uiting in De Parijse
					sfinks.</p>
			</div>
		</div>
		<div class="c-divider c-visual-info-collapse__divider"></div>
	</div>
</div>
			

		

Documentation

States

  • is-open

    This state displays the content and this class shoud be used as a toggle. This also rotates the toggle button to indicate the action.