Images

Component to display images in 1 or 2 columns.

Default

px

			
				<div class="
		c-images
	">
	<div class="l-grid l-grid--default-spacing">
		<div class="c-images__item l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<div class="c-images__image-wrapper" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
				<img src="" class="u-visually-hidden u-idle" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" width="757" height="953" />
			</div>
		</div>
		<div class="c-images__item l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<div class="c-images__image-wrapper" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
				<img src="" class="u-visually-hidden u-idle" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" width="757" height="953" />
			</div>
			<span class="c-images__caption">Doopsel van christus, Peter Paul Rubens</span>
		</div>
	</div>
</div>
			

		

Full width

px

			
				<div class="
		c-images
		c-images--full-width
	">
	<div class="l-grid l-grid--default-spacing">
		<div class="c-images__item l-grid__col:12/12">
			<div class="c-images__image-wrapper" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
				<img src="" class="u-visually-hidden u-idle" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" width="757" height="953" />
			</div>
		</div>
		<div class="c-images__item l-grid__col:12/12">
			<div class="c-images__image-wrapper" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
				<img src="" class="u-visually-hidden u-idle" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" width="757" height="953" />
			</div>
			<span class="c-images__caption">Doopsel van christus, Peter Paul Rubens</span>
		</div>
	</div>
</div>
			

		

Vertical

px

			
				<div class="
		c-images
		c-images--vertical
	">
	<div class="l-grid l-grid--default-spacing">
		<div class="c-images__item l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<div class="c-images__image-wrapper" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
				<img src="" class="u-visually-hidden u-idle" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" width="757" height="953" />
			</div>
		</div>
		<div class="c-images__item l-grid__col:12/12 l-grid__col:6/12@at:vp-7">
			<div class="c-images__image-wrapper" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
				<img src="" class="u-visually-hidden u-idle" alt="Schilderij het doopsel van Christurs van Peter Paul Rubens" width="757" height="953" />
			</div>
			<span class="c-images__caption">Doopsel van christus, Peter Paul Rubens</span>
		</div>
	</div>
</div>
			

		

Documentation

Modifiers

  • c-images--full-width

    The images will be placed in two columns by default, to set the images full width, place this modifier on the component.

  • c-images--vertical

    The images will be keep an aspect-ratio of 4/3 instead of 3/4.