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.
<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.
makes sure the text and icon are visible on top of the background-image by inverting the colors