Downloadable

The downloadable is a representation of the attachement card and is used to display brochures or important leaflets as downloadable. The download icon moves up and down on hover and is always in the right bottom corner.

Default

px 

			
				<article class="m-downloadable ">
	<span class="m-downloadable__icon "></span>
	<h4 class="m-downloadable__title">5 Stappen om een trefzeker leertraject te ontwerpen</h4>
	<a aria-label="Download" href="" class="m-downloadable__action">
	</a>
</article>

With background

px 

			
				<article class="m-downloadable m-downloadable--with-background">
	<div class="m-downloadable__image" style="background-image: url('/assets/images/background/image.png')">
	</div>
	<span class="m-downloadable__icon icon-file"></span>
	<h4 class="m-downloadable__title">Lesrendement.pdf</h4>
	<a aria-label="Download" href="" class="m-downloadable__action">
	</a>
</article>

With custom icon

The default paperclip icon is set via the class .m-downloadable__icon.

It is possible to add an icon class to the icon element to change the default paperclip icon. Make sure the new icon fits within the context of 'downloading a file', such as a file icon.

px 

			
				<article class="m-downloadable ">
	<span class="m-downloadable__icon icon-file"></span>
	<h4 class="m-downloadable__title">5 Stappen om een trefzeker leertraject te ontwerpen</h4>
	<a aria-label="Download" href="" class="m-downloadable__action">
	</a>
</article>

Documentation

Modifiers

  • m-downloadable--with-background

    makes sure the text and icon are visible on top of the background-image by inverting the colors