User Manual

Visual

The visual is a decorative element containing an illustration, a background-image or both. It has no fixed dimensions, they completly depend on the context.

Default


    
      

  
  <div class="m-visual " >
    	<img class="m-visual__illustration" src="/assets/general/img/illustrations/identity-papers.svg"/>
  </div>

With background


    
      

  
  <div class="m-visual " style="background-image:url('/assets/general/img/photos/nibc-header-1.jpg')">
    	<img class="m-visual__illustration" src=""/>
  </div>

Modifiers

  • .m-visual--contained Changes the behaviour of the image to scale until it reaches one of the sides of its parent container, without losing or changing the aspect ratio. This can create whitespace around the image because it is not scaled larger than its parent container.

  • .m-visual--contained@above-mobile-default Same behaviour as the m-visual--contained, but only applicable above the mobile-default breakpoint.

  • .m-visual--contained@above-tablet-default Same behaviour as the m-visual--contained, but only applicable above the tablet-default breakpoint.

  • .m-visual--contained@above-desktop-default Same behaviour as the m-visual--contained, but only applicable above the desktop-default breakpoint.

  • .m-visual--contained@above-desktop-large Same behaviour as the m-visual--contained, but only applicable above the desktop-large breakpoint.

  • .m-visual--contained@below-mobile-default Same behaviour as the m-visual--contained, but only applicable below the mobile-default breakpoint.

  • .m-visual--contained@below-tablet-default Same behaviour as the m-visual--contained, but only applicable below the tablet-default breakpoint.

  • .m-visual--contained@below-desktop-default Same behaviour as the m-visual--contained, but only applicable below the desktop-default breakpoint.

  • .m-visual--contained@below-desktop-large Same behaviour as the m-visual--contained, but only applicable below the desktop-large breakpoint.